Axios笔记

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
  1. 响应拦截器
在请求得到响应后执行的回调函数
可以对响应数据进行特定处理
成功的回调函数, 传递的默认是 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)
	}
}

posted @   kq1024  阅读(121)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示