【跨域】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实例
let service = axios.create({
    timeout: 60000
})

//设置post、put默认Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'

//添加请求拦截器
service.interceptors.request.use(
    (config) => {
        //LocalStorage中获取token后设置请求头
        config.headers.common['Authorization'] = getLocalStorage('Token')
        return config
    },
    (error) => {
        //请求错误处理
        Toast('请求超时!')
        return Promise.reject(error)
    }
)

//添加响应拦截器
//response拦截器
service.interceptors.response.use(data => {
    if (data.status && data.status == 200 && data.data.status == 'error') {
        Toast({ message: data.data.msg });
        return;
    }
    return data;
}, err => {
    //错误处理
    if (err && err.response) {
        switch (err.response.status) {
            case 400: Toast('请求错误(400)'); break;
            case 401: Toast('未授权,请重新登录(401)'); router.push('/login'); break;
            case 403: Toast('拒绝访问(403)'); break;
            case 404: Toast('请求出错(404)'); break;
            case 408: Toast('请求超时(408)'); break;
            case 500: Toast('服务器错误(500)'); break;
            case 501: Toast('服务未实现(501)'); break;
            case 502: Toast('网络错误(502)'); break;
            case 503: Toast('服务不可用(503)'); break;
            case 504: Toast('网络超时(504)'); break;
            case 505: Toast('HTTP版本不受支持(505)'); break;
            default: Toast(`连接出错(${err.response.status})!`);
        }
    } else {
        Toast('连接服务器失败')
    }
    Toast({ message: err.message })
    return Promise.reject(err);
})

/**
 * 创建统一封装过的axios实例
 * @return {AxiosInstance}
 */
export default function () {
    return service
}

index.js：这个文件主要封装我们几个常用的方法、get/post/put/delete

import axios from './axios'
let instance = axios()
export default {
    get(url, params) {
        return new Promise((resolve, reject) => {
            instance.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err => {
                reject(err.data)
            })
        })
    },
    post(url, params) {
        return new Promise((resolve, reject) => {
            instance.post(url, params)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    },
    put(url, params) {
        return new Promise((resolve, reject) => {
            instance.put(url, params)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    },
    delete(url, params) {
        return new Promise((resolve, reject) => {
            instance.delete(url, params)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data)
                })
        });
    }
}

install.js：这个文件可以把我们所有的api接口安装到全局，之后我们在main.js文件中导入就可以了。

import apiList from './apiList'
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    Object.defineProperties(Vue.prototype, {
        $api: {
            get() {
                return apiList
            },
            enumerable: false, // 不可枚举
            configurable: false // 不可重写
        }
    })
}
export default {
    install
}

main.js：在这个文件中添加

import api from './api/install'
Vue.use(api)

apiList.js：这个文件把我们所有api文件夹导入到这一个文件中来

import user from './user'
import matter from './matter'
import feedback from './feedback'
import clock from './clock'
import dynamic from './dynamic'
import location from './location'
import address from './address'
import coupon from './coupon'
import good from './good'
import order from './order'
export default {
    user,
    matter,
    feedback,
    clock,
    dynamic,
    location,
    address,
    coupon,
    good,
    order
}

user：这个文件下有两个文件： （这里只列举user，其他文件类似）

目录：

urls.js

const baseUrl = '/api'
export default {
    userinfo: baseUrl + '/client/users/userinfo',
    login: baseUrl + '/client/users/login',
    updatePassword: baseUrl + '/client/users/updatePassword',
    resetPassword: baseUrl + '/client/users/resetPassword',
    register: baseUrl + '/client/users/register',
    updateUserInfo: baseUrl + '/client/users/updateUserInfo',
    getAnnounce: baseUrl + '/client/users/getAnnounce'
}

index.js

import api from '../index'
import urls from './urls'
export default {
    //获取用户信息vuex保存
    userinfo() {
        return api.get(urls.userinfo)
    },
    //登录
    login(params) {
        params = {
            userName: params.userName,
            password: params.password
        }
        return api.post(urls.login, params)
    },
    //修改密码
    updatePassword(userId,params) {
        params = {
            oldPassword:params.oldPassword,
            newPassword:params.newPassword
        }
        return api.put(urls.updatePassword + `/${userId}`, params);
    },
    //重置密码
    resetPassword(userName,params) {
        return api.post(urls.resetPassword + `/${userName}`, params);
    },
    //注册
    register(params){
        return api.post(urls.register, params);
    },
    //编辑用户信息
    updateUserInfo(params,userId) {
        return api.put(urls.updateUserInfo + `/${userId}`, params);
    },
    //获取公告
    getAnnounce() {
        return api.get(urls.getAnnounce);
    }
    
}

在组件中使用： this.$api.user.useinfo(params)

try{
let params = {
            user_id:1001
          }
let res = await this.$api.user.useinfo(params)
consol e.log(res)
} catch (e) {
          console.log(e)
}