axios基础和封装

一、简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

二、安装

使用npm

//安装

npm install axios --save


//导入

import axios from "axios"

使用 cdn:

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

三、axios返回的数据

config 请求的时候附带的配置参数
data 后端返回的数据
headers 请求头里面包含发送给后端的格式 application/json;charset=UTF-8
request ajax请求
status 返回的状态码
statusText 返回的状态文字

四、使用axios请求数据

（1）发送GET不带参数请求

import axios from "axios";
export default {methods: {init(){axios.get('http://www.bufantec.com/api/douban/movie/in_theaters').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}},created () {this.init();}
}

（2）get带参数请求

import axios from "axios";
export default {methods: {init(){axios.get('http://www.bufantec.com/api/douban/movie/in_theaters?start=1&limit=10')// get请求附带参数的另一种写法/* axios.get('http://www.bufantec.com/api/douban/movie/in_theaters',{params:{start:2,limit:10}}) */.then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});}},created () {this.init();}
}

（3）post请求

 axios.post('http://order.gjw.com/Order_Api/GetValiCode').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

（4）post 带参数请求

axios.post('http://order.gjw.com/Order_Api/GetValiCode',{Mob:18311111111,validcode:"815961",use:"regiVali"} ).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

五、axios执行多个并发请求

一次执行多次ajax请求 promise.all 执行多个并发请求是通过axios.all完成

axios.all([function , function , ...])

baseGet(){//axios.get("url",参数).then(返回的信息)return axios.get('http://bufantec.com/api/douban/movie/in_theaters')},
basePost(){return  axios.post('http://bufantec.com/api/test/user/fileList')
},
getAll(){axios.all([this.baseGet(),this.basePost()]).then(res=>{console.log(res);})
}

请求完成之后会以数组的形式返回全部的请求数据

六、全局的 axios 默认值

axios.defaults.baseURL 设置默认公共请求地址baseURL

当我们的项目里面有很多的接口时设置默认baseURL对后期的维护很有必要

例如开发环境访问的是开发时的数据库生产环境访问的是线上数据库开发和生产访问的不是一个地址

在请求的时候自动的在地址前面加上设置的baseUrl

(开发环境是本地开发时的环境生产环境是打包之后的环境)

<script>axios.defaults.baseURL = 'http://localhost:3000';
</script>

七、设置超时时间

axios.defaults.timeout = 2500; 设置超时

当后端返回数据过慢时设置了超时就会自动断开请求

<script>
import axios from "axios";
axios.defaults.timeout = 3000;
</script>

八、设置请求头

token是登陆的时候返回的token 如果后端让在别的页面请求数据的是附带token

一般用户判断用户是否登陆是根据token 进行判断的一般把这个token存在session里面

只要把toke写在请求头里面后端就知道我们登陆

axios.defaults.headers.common['token'] = localStorage["token"]
//or
//config.headers.Authorization = window.sessionStorage.getItem('token');

登陆的时候保存sessionkey 然后在请求其他接口的时候带上这个sessionkey sessionkey 代表用户的身份当我们请求数据的时候带上这个sessionkey 那么后端就知道现在是谁在请求数据还有些特殊的情况登陆的时候后端会在本地设置cookie token 他会根据cookie里面的值token来判断用户是否登陆

axios.defaults.headers.common['sessionKey'] = 登陆时后端返回的sessionKey

如果你每次请求接口需要验证，就加这个，不需要验证那就不用加

九、axios拦截器 interceptors

页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。好在强大的axios为开发者提供了这样一个API：拦截器。拦截器分为请求（request）拦截器和响应（response）拦截器。

前端请求接口时首先向服务端发送请求的接口加参数这个步骤称之为request request 对象代表了一个HTTP请求，其具有一些属性来保存请求中的一些数据，比如params string，body，HTTP headers等等。

params get请求附带的参数
body post请求附带的参数
HTTP headers 提交数据类型

服务端接收到请求之后响应数据这个步骤称之为response response里面存放的就是服务端返回给我们的数据，包括状态码，返回的数据格式等等

axios拦截器就是对这请求前和返回数据后的这两个过程执行操作

axios拦截器开始类似路由守卫

+ 请求拦截器

config里面包含请求的参数如请求地址请求类似请求参数等在请求的时候执行一些操作比如开启loading弹窗可以想象成router的导航守卫

<script>
axios.interceptors.request.use(function (config) {// 在发起请求请做一些业务处理  console.log(config);return config;
}, function (error) {// 对请求失败做处理return Promise.reject(error);
});
</script>

+ 响应拦截器

比如响应数据之后进行的操作

<script>
axios.interceptors.response.use(function (config) {// 在请求之后做处理 如关闭loadingloadings.close();// 对返回过来的数据进行过滤操作return config.data;
}, function (error) {// 对请求失败做处理loadings.close();return Promise.reject(error);
});
</script>

十、proxy跨域

在vue-cli项目根路径下新建一个vue.config.js文件：

module.exports={devServer:{proxy:{// "/video":{//  target:'https://www.bilibili.com',//  changeOrigin:true// }//"/5a1Fazu8AA54nxGko9WTAnF6hhy":{//  target:'https://sp0.baidu.com',//changeOrigin:true//}"/ajax":{target:'https://m.maoyan.com', //代理地址changeOrigin:true}}}
}

然后在组件中发送请求：

getMove(){axios.get("/ajax/movieOnInfoList?token=&optimus_uuid=91964AE05B9611EB9993CF30142BEF43833191D4364E42FFBA29B34F6B04A0E3&optimus_risk_level=71&optimus_code=10").then(res=>{console.log(res)})
}

十一、axios封装

(1)我们可以在components文件夹中新建一个文件夹request，然后新建http.js文件，来封装axios

import axios from 'axios';
import router from '../router/index.js';
//import store from '../store/index';
import { Toast } from 'vant';

/** * 提示函数 * 禁止点击蒙层、显示一秒后关闭*/
const tip = msg => {    Toast({        message: msg,        duration: 1000,        forbidClick: true    });
}
/** * 跳转登录页* 携带当前页面路由，以期在登录页面完成登录后返回当前页面*/
// <router-link :to=""></router-link>


const toLogin = () => {router.replace({path: '/login',        query:{ //$route//$router.currentRoute：当前路由的路由信息对象，包含了当前匹配路由的信息redirect: router.currentRoute.fullPath}});
}

/** * 请求失败后的错误统一处理 * @param {Number} status 请求失败的状态码*/
const errorHandle = (status, other) => {// 状态码判断switch (status) {// 401: 未登录状态，跳转登录页case 401:toLogin();break;// 403 token过期// 清除token并跳转登录页case 403:tip('登录过期，请重新登录');localStorage.removeItem('token');// store.commit('loginSuccess', null);setTimeout(() => {toLogin();}, 1000);break;// 404请求不存在case 404:tip('请求的资源不存在'); break;default:console.log(other);   }}

// 创建axios实例
var instance = axios.create({ timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** * 请求拦截器 * 每次请求前，如果存在token则在请求头中携带token */
instance.interceptors.request.use(    config => {        // 登录流程控制中，根据本地是否存在token判断用户的登录情况        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        // const token =// store.state.token;   const token =localStorage.getItem("token")token && (config.headers.Authorization = token);        return config;    },    error => Promise.error(error))

// 响应拦截器
instance.interceptors.response.use(    // 请求成功res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    // 请求失败error => {const { response } = error;if (response) {// 请求已发出，但是不在2xx的范围 errorHandle(response.status, response.data.message);return Promise.reject(response);} else {// 处理断网的情况// eg:请求超时或断网时，更新state的network状态// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏// 关于断网组件中的刷新重新获取数据，会在断网组件中说明// store.commit('changeNetwork', false);//服务器连结果都没有返回//返回浏览器的联网状态。正常联网（在线）返回 true，不正常联网（离线）返回 falseif(!window.navigator.onLine){return;   }router.push("/err")return Promise.reject(error);}} );export default instance;

（2）在新建一个base.js文件，放置基础地址（公共地址）.有的大型项目基础地址baseURL不止一个。

/*** 接口地址的管理* 基础地址管理* 一个网站有可能有多个基础公共地址* */
const base = {    //sq: 'https://xxxx111111.com/api/v1',    //bd: 'http://xxxxx22222.com/api'bufan:'http://bufantec.com/api',zhubaba:'https://api.zhubaba.cn/user'
}

export default base;

（3）新建一个bufan.js文件放置不凡系列接口

/***不凡豆瓣电影接口系列* move模块接口列表*/

import base from './base.js'; // 导入公共请求头接口域名列表
import axios from './http.js'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块

const move = {    //电影250接口列表    move(params) {        return axios.get(`${base.bufan}/douban/movie/top250`,{params});    },    // 电影详情列表    moveDetail (id) {        return axios.get(`${base.bufan}/douban/movie/subject`,{id});    },// 登录接口    login(params) {        // return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    },//获取图片接口列表postgetPicAPI(params){return axios.post(`${base.bufan}/test/user/fileList`, qs.stringify(params))}// 其他接口…………
}

export default move

（4）新建一个zhubaba.js文件，放置祝爸爸系列接口

//猪爸爸系列相关接口import base from "./base.js";import axios from "./http.js";const zhu={getLogin(params){return axios.post('https://api.zhubaba.cn/user/login',params)},getInfo(){return axios.post('https://api.zhubaba.cn/user/getInfo');}}

（5）目前我们有两个基础接口地址，分别是bufan.js和zhubaba.js如果日后有需要可以在加。现在我们把所有接口模块汇总，放在一个出口文件中。新建exports.js文件

/** * api接口的统一出口*/
// 电影模块接口
import moveAPI from './bufan.js';
import zhuAPI from './zhubaba.js'
// 其他模块的接口……

// 导出接口
//export default {    // moveAPI,//zhuAPI// ……
//}

export default {moveAPI,zhuAPI
}

（6）基本工作准备好了，我们可以使用了。在使用之前我们需要确保项目中有vue-router、vant、vue、axios、qs等第三方包。

接下来新建一个Err.vue组件，用来做断网处理。然后新建一个任意组件，用来请求我们封装好的接口

<template><div><h3>不凡电影接口系列</h3><button @click="getmovies">点击获取电影top250</button><button  @click="getPicList">获取图片列表</button></div>
</template>

<script>import allAPI from "../request/exports.js"export default {data(){return {params:{limit:5,start:1}}},methods:{getmovies(){allAPI.moveAPI.move(this.params).then(res=>{console.log(res);})},getPicList(){allAPI.moveAPI.getPicAPI(this.params).then(res=>{console.log(res);})}}}
</script>

<style>
</style>

测试ok。axios的封装方便我们开发和维护。