Axios 是什么?
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
说人话就是让我们方便的发起ajax请求
为什么要用axios?
想必大家写过这样类似的代码
fetch(
"xxxx",
{
method:"xxx",
headers:{
"Content-Type":"xxxxxxxxxxxxxxxxx",
"Authorization":"xxxxxxxxxxxxxxxx"
},
body:`xxxxxxxxxx`
}
)
虽然相比XMLHttpRequest，fetch已经极大的简化了发起请求的代码
但是想headers里面的字段会经常变吗？
但是你不得每次发起请求的时候都重新带上这这些一模一样的字段。
当你想每次请求后，都检查一下状态码，获取请求前做一些判断是否登录的逻辑，你不得不重新写一边，聪明的你可能会cv，但是也是太过于麻烦。
作为一个能偷懒就偷懒的程序员会答应吗？不答应！
所以axios就是一个封装了网络请求的库，帮助我们更加优雅的写发起请求（偷懒）；
安装
由于我们还没有学习npm和模块系统，采用cdn引入的方式使用axios
<script src="[https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js](https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js)"></script>
浏览器中使用Axios
请求配置
就像平时我们在fetch里面配置url和各种请求头音乐，axios也接受一个配置对象。官网
{
url: '/user',
method: 'get', // 默认值
baseURL: 'https://some-domain.com/api/',
transformRequest: [function (data, headers) {
return data;
}],
transformResponse: [function (data) {
return data;
}],
headers: {'X-Requested-With': 'XMLHttpRequest'},
params: {
ID: 12345
},
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
data: {
firstName: 'Fred'
},
data: 'Country=Brasil&City=Belo Horizonte',
timeout: 1000, // 默认值是 `0` (永不超时)
withCredentials: false, // default
adapter: function (config) {
/* ... */
},
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
responseType: 'json', // 默认值
responseEncoding: 'utf8', // 默认值
xsrfCookieName: 'XSRF-TOKEN', // 默认值
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
onUploadProgress: function (progressEvent) {
// 处理原生进度事件
},
onDownloadProgress: function (progressEvent) {
// 处理原生进度事件
},
maxContentLength: 2000,
maxBodyLength: 2000,
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
maxRedirects: 5, // 默认值
socketPath: null, // default
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
proxy: {
protocol: 'https',
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
cancelToken: new CancelToken(function (cancel) {
}),
decompress: true // 默认值
}
是不是人都看麻了，我也是。
我们不必每个配置都记得清清楚楚，要用的时候就查就好。
介绍几个常用的
-
url它有两种写法，一种是绝对地址像这种runninglili.club:8080/getAllMessa… -
headers和原生的写法一致 -
timeout设置等待时长，如果超过此时间就会终止 -
data相当于原生的body配置项，默认将JavaScript 对象序列化为JSON发送 -
baseUrl设置后端的基础地址 -
params设置params参数 -
响应体编码
默认情况axios将 响应头序列化为 JSON
也就是免写.then(res=>res.json())这种常见情况的编码
也可以选择其他编码格式，等下细🔒
- 响应体结构
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: {}
}
通过Axios实例来配置一些默认情况，简化我们的工作
//先新建一个axios实例
const instance = axios.create({
baseURL: 'http://runninglili.club:8080',
headers: {
'Authorization': 'xxxxx',
"Content-Type":"application/x-www-form-urlencoded"
}
});
//之后我们就可以基于实例请求
instance.get("/getAllMessages")
.then(res=>{
const html=res.data.map(item=>
`<li>
<section class="imf">
<div>${item.username}</div>
<img src="${item.avatar}" alt="">
</section>
<h3 class="mes">${item.words}</h3>
</li>`
).join("")
document.querySelector(".chatUl").insertAdjacentHTML("beforeend",html)
});
拦截器
const instance = axios.create({ baseURL: 'http://localhost:8080',});
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
alert(err);
return Promise.reject(error);
});
//我们不必再对接下来的请求做错误处理，axios会自动帮我们调用
instance.get("/getAllMessge")
instance.post("/login",{...})
