axios 它的底层是用了 XMLHttpRequest(xhr)方式发送请求和接收响应,xhr 相对于之前讲过的 fetch api 来说,功能更强大,但由于是比较老的 api,不支持 Promise,axios 对 xhr 进行了封装,使之支持 Promise,并提供了对请求、响应的统一拦截功能
安装
没下载nvm你就不要试了
npm install axios -S
代码导入
import axios from 'axios'
-
axios 默认导出一个对象,这里的 import 导入的就是它默认导出的对象
后面会有代码案例供参考
方法
-
config - 选项对象、例如查询参数、请求头...
-
data - 请求体数据、最常见的是 json 格式数据
-
get、head 请求无法携带请求体,这应当是浏览器的限制所致(xhr、fetch api 均有限制)
-
options、delete 请求可以通过 config 中的 data 携带请求体
<template>
<div>
<input type="button" value="获取远程数据" @click="sendReq()">
</div>
</template>
<script>
import axios from 'axios'
const options = {
methods: {
async sendReq() {
// 1. 演示 get, post
// const resp = await axios.post('/api/a2');
// 2. 发送请求头
// const resp = await axios.post('/api/a3',{},{
// headers:{
// Authorization:'abc'
// }
// });
// 3. 发送请求时携带查询参数 ?name=xxx&age=xxx 特殊符号需要手动编码
// const name = encodeURIComponent('&&&');
// const age = 18;
// const resp = await axios.post(`/api/a4?name=${name}&age=${age}`);
// 不想自己拼串、处理特殊字符、就用下面的办法
// const resp = await axios.post('/api/a4', {}, {
// params: {
// name:'&&&&',
// age: 20
// }
// });
// 4. 用请求体发数据,格式为 urlencoded,,参数为对象时使用
// const params = new URLSearchParams();
// params.append("name", "张三");
// params.append("age", 24)
// const resp = await axios.post('/api/a4', params);
// 5. 用请求体发数据,格式为 multipart,参数为对象时使用
// const params = new FormData();
// params.append("name", "李四");
// params.append("age", 30);
// const resp = await axios.post('/api/a5', params);
// 6. 用请求体发数据,格式为 json,参数为对象时使用
const resp = await axios.post('/api/a5json', {
name: '王五',
age: 50
});
console.log(resp);
}
}
};
export default options;
</script>
创建实例——升级版
const _axios = axios.create(config);
-
axios 对象可以直接使用,但使用的是默认的设置
-
用 axios.create 创建的对象,可以覆盖默认设置,config 见下面说明
const _axios = axios.create({
baseURL: 'http://localhost:8080',
withCredentials: true
});
await _axios.post('/api/a6set')
await _axios.post('/api/a6get')
这里走的就不是vue.config.js中的配置了
-
生产环境希望 xhr 请求不走代理,可以用 baseURL 统一修改
-
希望跨域请求携带 cookie,需要配置 withCredentials: true,服务器也要配置 allowCredentials = true,否则浏览器获取跨域返回的 cookie 时会报错
响应格式
这是后端返回给前端获取到的对象的响应内容
-
200 表示响应成功
-
400 请求数据不正确 age=abc
-
401 身份验证没通过
-
403 没有权限
-
404 资源不存在
-
405 不支持请求方式 post文章来源:https://www.toymoban.com/news/detail-471185.html
-
500 服务器内部错误文章来源地址https://www.toymoban.com/news/detail-471185.html
到了这里,关于Axios后端程序员快速入门简述的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!