标签：axios 请求 request 笔记 Axios 拦截器 data 函数

axios笔记

基本知识

axios返回的是一个promise对象

axios将服务器返回结果自动json解析变成对象形式

请求拦截器和响应拦截器

请求拦截器中可以对config请求参数进行修改

响应拦截器中可以对response响应数据进行处理

拦截器总体上执行先后顺序为

请求拦截器→响应拦截器→用户自定义响应数据

拦截器内部上执行先后顺序为

请求拦截器为栈 响应拦截器队列

axios和Axios的关系

1、语法上：axios不是Axios的实例

2、功能上:axios是Axios的实例

3、axios是Axios.prototype.request函数bind()返回的函数

4、axios作为对象有Axios原型对象上所有方法，有Axios对象上所有属性

axios.create()的instance和axios的区别

相同：

1、都是一个能发任意请求的函数：request(config)

2、都是发特定请求的各种方法：get()/post()/put()/delete()

3、都有默认配置和拦截器的属性：defaults/interceptors

不同：

1、默认配置不一样

2、instance没有axios后面添加的一些方法：create()/CancelToken()/all()

axios 的请求/响应拦截器是什么

1. 请求拦截器:

在真正发送请求前执行的回调函数

可以对请求进行检查或配置进行特定处理

成功的回调函数, 传递的默认是 config(也必须是)

失败的回调函数, 传递的默认是 error

2. 响应拦截器

在请求得到响应后执行的回调函数

可以对响应数据进行特定处理

成功的回调函数, 传递的默认是 response

失败的回调函数, 传递的默认是 error

axios 的请求/响应数据转换器是什么?

请求转换器: 对请求头和请求体数据进行特定处理的函数

if (utils.isObject(data)) {
 setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
 return JSON.stringify(data);
}

响应转换器: 将响应体 json 字符串解析为 js 对象或数组的函数

response.data = JSON.parse(response.data)

response 的整体结构

{
 data,
 status,
 statusText,
 headers,
 config,
 request
 }

error 的整体结构

{
 message,
 response,
 request,
}

如何取消未完成的请求?

当配置了 cancelToken 对象时, 保存 cancel 函数

(1) 创建一个用于将来中断请求的 cancelPromise

(2) 并定义了一个用于取消请求的 cancel 函数

(3) 将 cancel 函数传递出来

用 cancel()取消请求

(1) 执行 cacel 函数, 传入错误信息 message

(2) 内部会让 cancelPromise 变为成功, 且成功的值为一个 Cancel 对象

(3) 在 cancelPromise 的成功回调中中断请求, 并让发请求的 proimse 失败, 失败的 reason 为 Cancel 对象

封装axios

request.js 文件中

import axios from 'axios'
import router from './router'
const instance = axios.create(
{
  baseURL: '',		//基础地址
  timeout: 1000,								//延迟时间
  headers: {'X-Custom-Header': 'foobar'}	    //请求头
})		//创建axios实例对象

//设置响应拦截器
instance.interceptors.response.use(res=>{
    const {code,data,msg} = res.data
    if(code==200){			//200为成功请求
        return data
    }else if(code==10001){
        console.log('msg')
        setTimeout(()=>{
            router.push('./login')		
        },1500)
        return Promise.reject(msg)
    }
})

instance.interceptors.request.use(res=>{
    //请求操作
})


export default instance

main.js入口文件

import request from './request'
Vue.prototype.$http =  request   //挂载到Vue原型上

使用的文件中

async getData(){
try{
  const data = 	await this.$http('url')
  console.log(data)
} catch(err){
  console.log(err)
	}
}

标签：axios,请求,request,笔记,Axios,拦截器,data,函数
From： https://www.cnblogs.com/kq981024/p/16795983.html