vue-axios使用_vue接口请求放在哪里写

vue-axios使用_vue接口请求放在哪里写什么是axiosAxios是一个基于promise的HTTP库,可以用在浏览器和node.js中。主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。a

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

什么是axios

Axios 是一个基于 promiseHTTP 库,可以用在浏览器和 node.js 中。

主要的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

axios有8个特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 `node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
     

安装

安装十分简单,使用 npm:

npm install axios

 

案例

执行 GET 请求

axios
  .get("请求地址", {
    // 拼接参数写在params中
    params: {
      ID: 12345,
    },
  })
  // 成功后做的事情
  .then(function (response) {
    console.log(response);
  })
  // 失败后做的事情
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios
  .post("请求地址", {
    firstName: "jkc",
    lastName: "123",
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行并发请求,当我们想要同时发出2个请求,可以使用axios.all()

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

axios.all([getUserAccount(), getUserPermissions()]).then((res) => {
  console.log(res);
});

以上代码我们先定义了2个方法,每个方法都会发送一个请求,最后把2个方法都放在数组中,这样程序就会同时执行2个方法,且最后的结果是在数组中,结果如下:
vue-axios使用_vue接口请求放在哪里写
上面返回的结果是在数组中,到时候取结果的时候就要用res[0],如果你觉得这样麻烦,如果我们想展开的话,可以使用axios.spread方法

axios.all([getUserAccount(), getUserPermissions()]).then(
  axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
  })
);

此时,我们返回的结果就不是一个数组了,会分开来,结果如下:
vue-axios使用_vue接口请求放在哪里写
 

axios请求配置

以下是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间,请求将被中断
  timeout: 1000,

  // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
  // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
}

 

响应结构

发送网络请求成功后,返回的响应结构如下:

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

    // `statusText` 来自服务器响应的 HTTP 状态信息
    statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {},
  // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

 

配置默认值

配置网络请求时,你可以指定将被用在各个请求的配置默认值
 

全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';  // 配置默认的baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;  // 配置默认请求头中的Authorization
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';  // 配置默认的post请求方式

 

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后更改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

拦截器

在请求或响应被 thencatch 处理前拦截它们。

// 2.1.请求拦截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求
      // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
      // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

 

项目中axios完整的封装

在真实项目开发中,我们会在src文件夹中创建一个utils文件夹,然后在文件夹中创建一个request.js文件,写入如下代码:

import axios from "axios";

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://xxx.xxx.xx.xx:8000",
    timeout: 5000,
  });

  // 2.1.请求拦截器
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求
      // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
      // 3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
      return config;
    },
    (error) => {
      console.log(error);
    }
  );

  // 2.2.响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (error) => {
      console.log(error);
    }
  );

  // 3.发送真正的网络请求
  return instance(config);
}

最后我们在main.js中给网络请求配置下全局属性即可

import { request } from "@/utils/request";

Vue.prototype.$request = request;

这样以后,我们在任何目录下,都可以直接使用request网络请求,不需要每次都导入了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164832.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • SilverLight网站收藏

    SilverLight网站收藏tp://msdn2.microsoft.com/en-us/asp.net/bb187452.aspxSilverlight1.0Beta下载http://msdn2.microsoft.com/en-us/asp.net/bb419316.aspxSilverlight1.1Alpha下载http://msdn2.microsoft.com/en-us/asp.net/bb4

    2022年10月19日
  • dpdk技术详解_dpdk acl

    dpdk技术详解_dpdk acligb_uio是dpdk内部实现的将网卡映射到用户态的内核模块,它是uio模块的一个实例。igb_uio是一种pci驱动,将网卡绑定到igb_uio隔离了网卡的内核驱动,同时igb_uio完成网卡中断内核态初始化并将中断信号映射到用户态。igb_uio与uio模块密切相关,我将从uio模块着手分析igb_uio模块的工作原理。uio模块分析uio可以看做是一种字符设备驱动,在此驱动中注册了单独的file_operations函数表,uio设备可以看做是

    2022年10月25日
  • Mac OS mysql 启动命令

    Mac OS mysql 启动命令在MacOSX启动和停止MySQL服务的命令  启动MySQL服务  sudo/usr/local/mysql/support-files/mysql.serverstart 停止MySQL服务  sudo/usr/local/mysql/support-files/mysql.server stop 重启MySQL服务  sudo…

  • 深入浅出玩转php一句话(含过waf新姿势)

    深入浅出玩转php一句话(含过waf新姿势)本帖最后由sucppVK于2017-1-914:39编辑一、前言本文原创作者:XXX,本文属i春秋原创奖励计划,未经许可禁止转载!各个论坛出了不少过waf的一句话可笔者见还是有不少小白没有理解一句话(只知道是拿来链接菜刀)今天打算做一篇面向初学者的教程,总结知识点,抛砖引玉。让小白从彻底理解马的含义,到打造属于自己过waf的马。—-

  • SQL嵌套查询_sql嵌套查询返回多个字段

    SQL嵌套查询_sql嵌套查询返回多个字段说到嵌套查询,首先得理解嵌套查询是什么意思,简单来说就是,一个查询语句可以嵌套在另外一个查询语句的where子句中。外层的查询称为父查询(主查询),内层的查询称为子查询(从查询)。嵌套查询的工作方式是由内向外的,即先进行内层查询,外层查询则利用内层查询的结果集作为条件进行查询。当然,嵌套查询不仅仅是select语句的专属,它还可以用在update、insert、delete语句中。如(update…

  • 【ubuntu修改密码】ubuntu忘记密码,修改密码[通俗易懂]

    【ubuntu修改密码】ubuntu忘记密码,修改密码[通俗易懂]ubuntu忘记密码,修改密码在启动ubuntu时,迅速按下shift键,进入grub启动菜单界面,选中高级选项,回车;选择recoverymode模式,即系统和密码恢复模式。然后按e启动编辑上下移动光标到recoverynomodeset位置,删除recoverynomodeset删除之后,在该位置添加quietsplashrwinit=/bin/bash,然后按f10按下f10后,进入编辑页面,在这里可以通过输入passwd来重置root账户密码,也可以通过输入passw

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号