vue中axios的运用、封装

一、什么是axios

axios是一个轻量的HTTP客户端，基于XMLHttpRequest服务器来执行HTTP请求，支持Promise等配置。现在axios已成为大部分Vue开发者的首先

特性

· 从浏览器中创建XMLHttpRequests

· 从node.js创建http请求

· 支持Promice API

· 拦截请求和响应

· 转换请求数据和响应数据

· 取消请求

· 自动转换JSON数据

· 客服端支持防御XSRF

基本使用

安装

//npm安装

npm install axios --s

//cdn引入

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

导入

import axios from 'axios'

发送请求

axios({
    url    : 'httpxxxxxx',
    method : 'GET',
    params : {
    	id : 1
    }
}).then(res => {
    console.log(res);
})

并发请求

function getInfo1(){
    return axios.get('/info1');
}
function getInfo2(){
    return axios.get('info2');
}
axios.all([getInfo1() , getInfo2()]).then((res1 , res2) => {
    console.log(res1 , res2);//res1 代表第一个请求返回信息，res2 代表第二个请求返回信息
})

二、为什么要封装

axios 的API很友好，你完全可以轻松地在项目中直接使用

随着项目规模增大，如果每发起一次HTTP请求，就要设置一次请求超时、请求头、错误处理等，这种重复的劳动不仅浪费时间，还让代码变得冗余，为了提高代码质量，我们可以在项目中二次封装axios再使用

举个例子：

axios('httpxxxxxx',{
    method           : 'GET',
    timeout          : 1000,
    withCredentials  : true,
    headers          : {
    	'Content-Type'   :'application/json',
        'Authorization'  : 'xxxx',
    },
    transformRequest :[function(data , headers){
    	return data;
    }]
    ...
}).then((res) => {
    console.log(res);
},(err) => {
    if(err.response.status === 401){
    	...
    }
    if(err.response.status === 403){
    	...
    }
    console.log(err);
})

如果每个页面发送请求都要写一堆配置和错误处理，就显得过于繁琐了，这个时候我们就要对axios进行二次封装，让使用更为便利

三、如何封装

要和后端开发人员协商好一些约定，请求头、状态码等

1、设置接口请求前缀

利用node环境变量来做判断，用来区分测试、生产环境

if(process.env.NODE_ENV == 'development'){
    axios.defaults.baseURL = 'http://dev.xxx.com';
}else if(process.env.NODE_ENV == 'production'){
    axios.defaults.baseURL = 'http://pro.xxx.com';
}

在本地测试的时候，需要再vue.config.js文件中配置devServer实现代理转发，从而实现跨域

devServer : {
    proxy : {
        '/proxyApi' : {
            target       : 'http://dev.xxx.com',
            changeOrigin : true,
            pathRewrite  : {
                '/proxyApi' : ''
            }
        }    
    }
}

2、请求头与超时时间

大部分情况下，请求头都是固定的，少数情况需要特殊请求头

const service = axios.create({
    ...
    timeout :30000,//请求 30s 超时
    headers ：{
        get ： {
            'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8',
        },
        post : {
            'Content-type' : 'application/json;charset=utf-8'
        }
    }
})

3、请求方法：根据get、post等方法进行一个再次封装、用起来更方便

先引入封装好的方法，在要调用的接口重新封装成一个方法暴露出来

//get 请求
export function httpGet({url , params = {}}){
    return new Promise((resolve , reject) => {
        axios.get(url , {
            params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err)
        })
    })
}
//post请求
export function httpPost({url , data = {} , params = {}}){
    return new Promise((resolve , reject) => {
        axios({
            url : url,
            method : 'post',
            transformRequest : [data => {
                let ret = '';
                for(let it in data){
                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                }
                return ret;
            }],
            data,
            params
        }).then(res => {
            resolve(res.data)
        })
    })
}

把封装的方法放在一个api.js文件中

import {httpGet , httpPost} from './http'
export const getorglist = (params = {}) => httpGet(url : 'apps/api/org/list' , params)

页面中就能直接调用

import {getorglist} from '@/assets/js/api'
getorglist({id : 200}).then(res => {
    console.log(res)
})

4、请求拦截器

请求拦截器可以在每个请求里面加上token，做了统一处理后维护起来也方便

//请求拦截器
axios.interceptors.request.usee(
    config => {
        //每次发送请求之前判断是否存在token
        //如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，
        //此处token一般是用户完成登录后储存到localStorage里的
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    }
)

5、响应拦截器，返回状态码

响应拦截器可以在接收到响应后先做一层操作，如根据状态码判断登录状态、授权

axios.interceptors.request.use(resopnse => {
    //如果返回的状态码位200，说明接口请求成功，可以正常拿到数据
    //否则排除错误
    if(response.status === 200){
        if(response.data.code === 511){
            //未授权调取授权接口
        }else if(response.data.code === 510){
            //未登录跳转登录页
        }else{
            return Promise.resolve(response)
        }
    }else{
        return Promise.reject(response)
    }
},error => {
    if(error.response.status){
        //处理请求失败的情况
        //对不同返回码相应处理
        return Promise.reject(error.response)
    }
})

声明： 本文章转至微信公众号“Vue中文社区”，如有侵权，请联系本人删除。

我也是个前端开发人员，这是我的第一篇学习文章，今后要以发文章的形式将学习进行到底。