Axios学习笔记

Axios简介

axios前端异步请求库类似JQuery ajax技术，

ajax用来在页面发起异步请求到后端服务，并将后端服务响应数据渲染到页面上，

jquery推荐ajax技术，但vue里面并不推荐在使用jquery框架，vue推荐使用axios异步请求库。

axios总结：

• 用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新页面局部；
• 官方定义: axios 异步请求库并不是vue官方库第三方异步库在vue中推荐axios；
• 特点：易用、简洁且高效的http库 —> 发送http异步请求库。

Axios功能&特性

• 从浏览器中创建XLHttpRequests从 node.js 创建http请求（发送axios异步请求）
• 支持Promise API
• 拦截请求和响应（做拦截器）
• 转换请求数据和响应数据取消请求
• 自动转换JSON数据，客户端支持防御XSRF

常规使用

发送Get请求，查询：

axios.get("http://localhost:8081/demo?id=21&name=xiaowang ").then( function(res){//代表请求成功之后处理console.1og (res.data);
}).catch( function (err){//代表请求失败之后处理alert ('进入catch ')console.log (err);
});

// 为给定 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);});

其他请求

axios.put(.then( ).catch ( ); //修改
axios.patch( ).then( ).catch( );
axios.delete( "ur1?id=21").then ( ).catch ( ); //删除

Axios的封装

import axios from 'axios'
export default function axios(option){return new Promise((resolve,reject) => {//1.创建sxios实例const instance = axios.create({url: 'api',timeout: 5000,headers: ''})//2.传入对象进行网络请求instance(option).then(res => {resolve(res)}).catch(err => {reject(err)})
})
}

Axios创建默认实例发送请求

//创建axios的配置对象
var instance = axios. create({baseURL: 'http://localhost:8081/',        //基础路径，后面的请求的url就直接写接口路径就行timeout: 5000,
});

这里的请求地址，直接写对应的接口路径
instance.get("/demo?id=21&name=xiaowang ").then( function(res) {//代表请求成功之后处理console.log(res);console.1og (res.data);
}).catch( function (err) {//代表请求失败之后处理alert ('进入catch ');console.log (err);
});

Axios封装一个request请求

export function request(config, success, failure) {// 1.创建axios的实例const instance = axios.create({baseURL: 'http://127.0.0.1:8080',timeout: 5000})// 发送真正的网络请求instance(config).then(res => {success(res);}).catch(err => {failure(err)})
}

Axios拦截器

请求拦截器

请求拦截器作用是在发出请求时，拦截下用户的请求，执行完一系列处理再发送出去（像添加cookie、token，请求头等）

配置请求拦截器

• 首先创建一个axios实例对象

import axios from 'axios'
import { ELMessage } from 'element-plus'
const myRequest = axios.create({baseURL: process.env.BASE_API, // 这里可以写自己访问的地址,例如127.0.0.1timeout: 3000, // 请求超时时间headers: {"Content-Type": "application/json;charset=utf-8"}
})

• 接下来就是配置请求拦截器(interceptor.request)

myRequest.interceptors.request.use(req=>{...}, // 对发起的请求进行处理，方法写在{}中，req是请求参数err=>{...}, // 出现请求错误时进行的处理
}

下面写一个设置token的实例：

myRequest.interceptors.request.use(config => {const token = localStorage.getItem('token') // 获取存取的tokenif(token){ // 不为空的话就设置进headersconfig.headers['token'] = token}return config},err => {return Promise.reject(error)}
)

响应拦截器

配置响应拦截器

myRequest.interceptors.response.use(res=>{...}, // 对响应进行处理，方法写在{}中，res是返回数据err=>{...}, // 出现请求错误时进行的处理
)

假如服务器的响应为：

{"errCode" : 0,"errDesc" : "Success","data": "xxxxxx"
}

这时候我们可以这样写响应拦截器：

myRequest.interceptors.response.use(res => {if(res.errCode ==  0){return Promise.resolve(res.data)}else {ElMessage({message: "Error",type: 'error',duration: 5 * 1000})return Promise.reject(new Error("Error Message"))}},err => {ElMessage({message: err.data.message,type: 'error',duration: 5 * 1000})}
)

通过上面的处理之后，我们axios.xxx().then((res)=>{…})的res就为响应数据的data，其中errCode和errDesc就被处理掉了。