盘锦seo网站建设,山东聊城建设局网站,南京网络推广公司排行榜,普陀网站制作Axios请求#xff08;对于ajax的二次封装#xff09;——Axios请求的响应结构、默认配置知识回调#xff08;不懂就看这儿#xff01;#xff09;场景复现核心干货axios请求的响应结构响应格式详解实际请求中的响应格式axios请求的默认配置全局axios默认值#xff08;了解…
Axios请求对于ajax的二次封装——Axios请求的响应结构、默认配置知识回调不懂就看这儿场景复现核心干货axios请求的响应结构响应格式详解实际请求中的响应格式axios请求的默认配置全局axios默认值了解自定义实例默认值自定义实例默认值在实际开发中的使用配置的优先级知识回调不懂就看这儿
知识专栏专栏链接Axios知识专栏https://blog.csdn.net/xsl_hr/category_12287421.html?spm1001.2014.3001.5482axios起步——介绍和使用 post请求https://blog.csdn.net/XSL_HR/article/details/130141944Axios请求对ajax的二次封装——Axios API、Axios实例、请求配置、Axios响应结构https://blog.csdn.net/XSL_HR/article/details/130159746
有关Axios的相关知识可以前往Axios知识专栏查看复习
场景复现
最近学习与前端相关的小程序时接触了异步请求api的封装和实现涉及到了很多底层的基础知识比如ajax和axios工具因此计划用两个专栏来系统的学习关于axios和ajax的实用知识。 本期文章将重点介绍Axios请求的响应结构、默认配置。
核心干货 axios官方中文文档https://axios-http.com/zh/ ajax文档https://www.runoob.com/ajax/ajax-tutorial.html axios请求的响应结构
响应格式详解
一个请求的完整响应包含以下信息
{// data 由服务器提供的响应data: {},// status 来自服务器响应的 HTTP 状态码status: 200,// statusText 来自服务器响应的 HTTP 状态信息statusText: OK,// headers 是服务器响应头// 所有的 header 名称都是小写而且可以使用方括号语法访问// 例如: response.headers[content-type]headers: {},// config 是 axios 请求的配置信息config: {},// request 是生成此响应的请求// 在node.js中它是最后一个ClientRequest实例 (in redirects)// 在浏览器中则是 XMLHttpRequest 实例request: {}
}当我们使用.then时将会接收如下响应
axios.get(/user/12345).then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});当我们使用 catch或者传递一个rejection callback作为 then 的第二个参数时响应可以通过 error 对象被使用。后期会在错误处理部分详细介绍
实际请求中的响应格式 当我们发起网络请求之后浏览器的控制台中的网络面板会显示请求的状态。比如请求的状态和状态码请求响应头的内容等等。
axios请求的默认配置
对于默认配置我们可以指定默认配置它将作用域每个请求。
全局axios默认值了解
// 设置默认的API地址
axios.defaults.baseURL https://api.example.com;
// 设置所有的请求都会带上一个名为Authorization的HTTP头部 并且该头部值为AUTH_TOKEN变量所代表的内容
axios.defaults.headers.common[Authorization] AUTH_TOKEN;
// 设置POST请求时默认使用application/x-www-form-urlencoded格式来编码数据
axios.defaults.headers.post[Content-Type] application/x-www-form-urlencoded;自定义实例默认值
// 创建实例时配置默认值
const instance axios.create({baseURL: https://api.example.com
});// 创建实例后修改默认值
instance.defaults.headers.common[Authorization] AUTH_TOKEN;自定义实例默认值在实际开发中的使用
const request axios.create({baseURL: /store, // url base url request urltimeout: 360000// withCredentials: true // send cookies when cross-domain requests
})
// Request interceptors
request.interceptors.request.use((response) {NProgressE.start()const satoken localStorage.getItem(token)if (satoken ! ) {response.headers[token] satoken}return response},(error) {NProgressE.error(true);Promise.reject(error)}
)// Response interceptors
request.interceptors.response.use((response) {NProgressE.done(false)return response},(error) {NProgressE.error(true);message.error(error.message)return Promise.reject(error)}
)配置的优先级
配置将会按优先级进行合并。它的顺序是在lib/defaults.js中找到的库默认值然后是实例的 defaults 属性最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子
/ 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 0
const instance axios.create();// 重写库的超时默认值
// 现在所有使用此实例的请求都将等待2.5秒然后才会超时
instance.defaults.timeout 2500;// 重写此请求的超时时间因为该请求需要很长时间
instance.get(/longRequest, {timeout: 5000
});以上就是关于与axios请求相关的axios API、axios实例、axios请求配置的分享相信看完这篇文章的小伙伴们一定有了一定的收获。当然可能有不足的地方欢迎大家在评论区留言指正
下期文章将介绍axios拦截器的相关内容感兴趣的小伙伴可以订阅本专栏方便后续了解学习~觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~
