【跨域】Axios二次封装

Axios简介：

axios是一个promise实现的http库，符合最新的ES规范。要用这个东西主要有以下几个原因：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 拦截请求和响应
• 转换请求数据和响应数据
• 支持 Promise API（可以配合ES7的async await使用，解决回调地狱）
• 客户端支持防止CSRF
• 提供了一些并发请求的接口
• 轻量，体积小

安装

npm install axios

执行 GET 请求

//为给定ID的user创建请求
axios.get('/user?ID=12345')
     .then(function (response) {
   
         console.log(response);
     })
     .catch(function (error) {
   
         console.log(error);
     });

//可选地，上面的请求可以这样做
axios.get('/user', {
   
    params:{
   
        ID:12345
    }
})
.then(function (response) {
   
    console.log(response);
})
.catch(function (error) {
   
    console.log(error);
});

执行POST请求：

axios.post('/user', {
   
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
   
    console.log(response);
})
.catch(function (error) {
   
    console.log(error);
})

执行多个并发请求：

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

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

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct,perms) {
   
    //两个请求现在都执行完成
}))

Axios二次封装：

目录：

axios.js：这个文件主要创建axios实例并对拦截器进行配置
拦截器图解：

import axios from 'axios'
import {
    getLocalStorage } from '@/utils/localStorage'
import {
    Toast } from 'vant'

//创建axios实例