十二、axios基本使用

参考 https://www.jianshu.com/p/f959366fadb8

一、安装

1、直接引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、在VUE CLI中使用

进入项目然后安装axios

npm install axios --save

因为axios不是vue的插件，所以不能直接用use方法，需要将其加载到原型上。

import axios from 'axios'

如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用

Vue.prototype.$axios = axios;

this.$axios.get();

二、简单使用

发送一个最简单的请求

1、get请求

这里我们发送一个带参数的get请求，params参数放在get方法的第二个参数中，如果没有参数get方法里可以只写路径。如果请求失败捕获一下异常。

axios
  .get('http://www.httpbin.org/get',{
      params: {
         id: 5
      }
   })
  .then(res => {
    console.log('数据是:', res);
  })
  .catch((e) => {
    console.log('获取数据失败');
  });

查看输出

2、post请求

当然，我们也可以发送一个POST请求，post方法的第二个参数为请求参数对象。

import axios from 'axios'

axios.post('http://www.httpbin.org/post',{
  name: 'wangxiaoyu'
})
.then(function(res){
  console.log('数据是:',res);
})
.catch(function(err){
  console.log(err);
});

查看输出

3、一次合并发送多个请求

分别写两个请求函数，利用axios的all方法接收一个由每个请求函数组成的数组，可以一次性发送多个请求，如果全部请求成功，在axios.spread方法接收一个回调函数，该函数的参数就是每个请求返回的结果。

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
this.$axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(res1,res2){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
}))

三、axios API

以上通过axios直接调用方法来发起对应的请求其实是axios为了方便起见给不同的请求提供的别名方法。我们完全可以通过调用axios的API，传递一个配置对象来发起请求。

发送post请求，参数写在data属性中

import axios from 'axios'
axios({
  url: 'http://www.httpbin.org/post',
  method: 'post',
  data: {
    name: 'wangxiaoyu'
  }
}).then(res => {
  console.log('请求结果：', res);
})

发送get请求，默认就是get请求，直接第一个参数写路径，第二个参数写配置对象，参数通过params属性设置。

import axios from 'axios'
axios({
  url: 'http://www.httpbin.org/get',
  params: {
    'name': 'wangxiaoyu'
  }
}).then(res => {
  console.log('请求结果：', res);
})

axios为所有请求方式都提供了别名：

axios.request(config)

axios.get(url, [config])

axios.delete(url, [config])

axios.head(url, [config])

axios.options(url, [config])

axios.post(url, [data], [config])

axios.put(url, [data], [config])

axios.patch(url, [data], [config])

四、axios配置默认值

1、可以通过axios.defaults设置全局默认值，在所有请求中都生效。

axios.defaults.headers.common["token"] = ""
axios.defaults.headers.post["Content-type"] = "application/json"
axios.defaults.baseURL = 'https://service.xxx.com; //设置统一路径前缀

2、也可以自定义实例的默认值，以及修改实例的配置

// 创建时自定义默认配置，超时设置为全局默认值0秒
let ax = axios.create({
  baseURL: 'http://rap2api.taobao.org',
  params: { name: '小月' }
});
// 修改配置后，超时设置为4秒
ax.defaults.timeout = 4000; 

3、也可以像前面那样，在每个请求中设置相关的配置。

axios('/app/mock/121145/get', {
  params: {
    name: 'xiaoxiao'
  },
  baseURL: 'http://rap2api.taobao.org'
})

4、以上配置方法优先级从1-3依次增高，更多配置选项查看文档。

{
    method：'请求方法',
    baseURL：'如果路径不是绝对路径，就会在路径前自动添加此路径',
    transformRequest: [(data, header)=>{}], //在发送请求之前修改数据，适用于post、put、patch
    transformResponse:  [(data)=>{
        return JSON.parse(data).data;
    }], //在收到的数据传到then之前修改数据，注意这里data是个字符串类型。
    header: {'X-Requested-With': 'XMLHttpRequest'}, //请求头
    params: {}, //请求参数
    paramsSerializer: (params)=>{
        return qs.stringify(params); //name=xiaohong&id=1
    } //可选函数，可以把参数拼接成字符串
    data: {}, // post类方法的请求体参数
    timeout: 0, //请求延时事件，如果超时请求终止
    withCredentials: false, //是否时跨站点请求
    onUploadProgress: (progressEvent)=>{
        //可以通过progressEvent拿到上传的进度
    },
    onDownloadProgress: ()=>{},//和onUploadProgress一样，获取下载的进度
    responseType: json,  // 返回的数据格式
    maxContentLength: 2000, //相应内容的最大尺寸
    validateStatus: (validateStatus)=>{
        return validateStatus >= 200; //限制相应状态码，如果不满足就拒绝
    },
    cancelToken: new cancelToken(function(cancel){}) // 指定一个取消请求标识，下面会用到
}

五、axios实例

参考 axios实例

1、为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？

• 引入axios,然后在页面中进行请求axios.get(‘url’).then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了
• 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
• 比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器。

2、axios实例的配置

    //常用的基本配置
    axios.create({
        baseURL:'http://localhost:8080', //请求的域名，基本地址
        timeout:5000,  //请求的超时时长，单位毫秒
        url:'/data.json',  //请求的路径
        method:'get，post，put，patch，delete' , //请求方法
        headers:{
            token:''  //比如token登录鉴权，请求的时候携带token，让后端识别登录人的信息
        },   //请求头
        params:{},  //请求参数拼接在URL上
        data:{},    //请求参数放在请求体里

    })

3、都哪里可以配置axios呢

（1）axios全局配置

//axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置，也就下边这两个
axios.defaults.timeout = 1000 
axios.defaults.baseURL = 'http://localhost:8080'

（2）axios实例配置

//如果create()里不添加参数的话，在创建这个axios实例的时候，使用的就是全局的配置
// 这个时候instance的timeout是1000
const instance = axios.create(); 

//如果设置了全局的配置，但是又想在创建的实例里修改配置怎么办
instance.default.timeout = 3000

（3）axios请求配置

let instance = axios.create();
instance.get(’/data.json’,{
timeout:5000
})

这3种配置方法的优先级是 axios请求配置 > axios实例配置 > axios全局配置

4、具体的使用

在实际开发项目中，全局配置的局限性比较大，一般我们会全局配置两个参数,axios.defaults.timeout和axios.defaults.baseURL

假如我们有两个请求接口，那么我们一般的做法是创建两个axios实例

axios.defaults.timeout = 1000 
axios.defaults.baseURL = 'http://localhost:8080'

const instance1 = axios.create({
      baseurl:'http://localhost:8080',
      timeout:'1000'
})

const instance2 = axios.create({
      baseurl:'http://localhost:9090',
      timeout:'3000'
})

//instance1这里用到的参数有 baseurl,timeout,method,url
instance1.get('/userinfo').then(res=>{
  console.log(res)
})

//instance2这里用到的参数有 baseurl,timeout,method,url，params,并且对timeout进行了修改
instance1.get('/orderlist',{
    timeout:'5000'
    params:{}
}).then(res=>{
  console.log(res)
})

六、axios拦截器

参考 axios拦截器
axios全局配置及拦截器

应用场景：
1：每个请求都带上的参数，比如token，时间戳等。
2：对返回的状态进行判断，比如token是否过期

1、创建一个axios实例

let instance = axios.create({
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})

2、编写请求拦截器

这个拦截器会在你发送请求之前运行

这个请求拦截器的功能是为我每一次请求去判断是否有token，如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。

// http request 拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断session中是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = sessionStorage.getItem('token')
    if (token ) {
      config.headers.authorization = token  //请求头加上token
    }
    //一定要return config
    return config
  },
  err => {
    return Promise.reject(err)
  })

3、响应拦截器

instance.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          vant.Toast.fail("身份验证失败，请关闭重新进入。");
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          vant.Toast.fail("登录过期，请关闭重新进入。");
          // 清除token
          break;

        // 404请求不存在
        case 404:
          vant.Toast.fail("您访问的网页不存在。");
          break;
        // 其他错误，直接抛出错误提示
        default:
          vant.Toast.fail(error.response.data.message);
      }
      return Promise.reject(error.response);
    }
  }
);

最后把实例导出

export default instance

在需要的页面导入就可以使用了

import instance from './axios'

/* 验证登陆 */
export function handleLogin (data) {
  return instance.post('/ds/user/login', data)
}

七、axios封装

参考vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
vue中Axios的封装和API接口的管理

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019