Vue中axios的使用
1、axios的基本使用
1.1、简介
说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：
异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：
- 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
- jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
- Axios（ajax i/o system）：
这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。
axios具备以下特点：
在浏览器中创建XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
取消要求
自动转换JSON数据
1.2、安装
1.2.1、通过cdn引入
1.3、基本使用
1.3.1、准备服务器
模拟服务器，这里使用json-server
（1）安装json-server
npm install -g json-server
（2）创建数据源
在空文件夹下创建JSON文件作为数据源，例如 db.json
{ "list": [ { "id": "1", "name": "唐僧", "age": 20, "address": "东土大唐" }, { "id": "2", "name": "孙悟空", "age": 500, "address": "花果山" }, { "id": "3", "name": "猪八戒", "age": 330, "address": "高老庄" }, { "id": "4", "name": "沙悟净", "age": 200, "address": "流沙河" }, { "id": "5", "name": "红孩儿", "age": 10, "address": "火焰山" } ] }（3）启动服务器
使用以下命令启动json-server，并将JSON文件作为参数传递给服务器。这将在本地计算机的3000端口上启动服务器，并将db.json文件中的数据暴露为RESTful API。
方式一、//db.json是文件名
json-server db.json
方式二、
json-server --watch db.json
方式三、
跟db.json同级目录，创建package.json文件，配置别名
{ "scripts":{ "mock":"json-server --watch db.json" } }启动方式：npm run mock
1.3.2、各种请求方式
1.3.2.1、get请求
获取数据，请求指定的信息，返回实体对象
Document #warp { width: 400px; margin: 50px auto; } .showUser { width: 400px; margin: 10px auto; height: 260px; border: 1px solid red; } li { line-height: 2; background-color: pink; margin: 10px; } get请求 - ${item.name}删除 `; }); showUser.innerHTML = str; }
此外get请求，还可以携带参数
// get请求带参数方式一
// try {
// let res = await axios.get("http://localhost:3000/list?id=1");
// render(res.data);
// } catch (error) {
// console.log(err);
// }
// get请求带参数方式二
try {
let res = await axios.get("http://localhost:3000/list", {
params: {
id: 2,
},
});
render(res.data);
} catch (error) {
console.log(err);
}
1.3.2.2、post请求：
向指定资源提交数据（例如表单提交或文件上传）
Document
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
post请求
1.3.2.3、put请求：
更新数据，从客户端向服务器传送的数据取代指定的文档的内容
会把更新的数据完全替代原数据，如果只修改了部分的数据，原数据其他内容都会丢失
Document
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
put请求-修改数据
1.3.2.4、patch请求：
更新数据，是对put方法的补充，用来对已知资源进行局部更新
Document
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
patch请求-修改数据
1.3.2.5、delete请求：
请求服务器删除指定的数据
Document
#warp {
width: 400px;
margin: 50px auto;
}
.showUser {
width: 400px;
margin: 10px auto;
height: 260px;
border: 1px solid red;
}
li {
line-height: 2;
background-color: pink;
margin: 10px;
}
delet请求-修改数据
1.3.3、axios的配置
配置的优先级为：请求配置 > 实例配置 > 全局配置
1.3.3.1、全局配置
Document
发送请求
//配置全局的超时时长
axios.defaults.timeout = 2000;
//配置全局的基本URL
axios.defaults.baseURL = "http://localhost:3000";
async function getData() {
try {
let res1 = await axios.get("/list");
let res2 = await axios.get("/user");
console.log(res1.data);
console.log(res2.data);
} catch (error) {
console.log(error);
}
}
1.3.3.2、实例配置
在一个项目中，我们会有很多不同的请求，如果都用axios去请求，很容易造成冲突，所以我们可以去创建axios的实例，通过不同的实例去请求，配置
Document
发送请求
async function getData() {
// 创建实例1，创建同时配置
let instance = axios.create({
baseURL: "http://localhost:3000",
timeout: 2000,
});
let res = await instance.get("/list");
console.log(res.data);
// 创建实例2，现创建，再配置
let instance2 = axios.create();
instance2.defaults.timeout = 2;
instance2.defaults.baseURL = "http://localhost:3000";
let res2 = await instance.get("/user");
console.log(res2.data);
}
axios实例常用配置：
-
- baseURL 请求的域名，基本地址，类型：String
- timeout 请求超时时长，单位ms，类型：Number
- url 请求路径，类型：String
- method 请求方法，类型：String
- headers 设置请求头，类型：Object
- params 请求参数，将参数拼接在URL上，类型：Object
- data 请求参数，将参数放到请求体中，类型：Object
1.3.3.3、请求配置
Document 发送请求 async function getData() { let res = await axios.get("http://localhost:3000/list", { timeout: 2000, }); console.log(res.data); }1.3.4、axios的拦截器
axios给我们提供了两大类拦截器
请求方向的拦截（成功请求，失败请求）
响应方向的拦截（成功的，失败的）
拦截器的作用，用于我们在网络请求的时候，在发起请求或者响应时对操作进行处理
例如：发送请求时，可以添加网页加载的动画，或认证token，强制用户先登录再请求数据
响应的时候，可以结束网页加载的动画，或者对响应的数据进行处理
1.3.4.1、请求拦截器
Document 发送请求 // 请求拦截器 async function getData() { axios.interceptors.request.use( (config) => { // 发生请求前的一系列的处理 console.log("开启加载动画"); console.log("认证是否有token，如果没有，要去登录"); return config; //拦截后的放行 }, (err) => { // 请求错误处理 return Promise.reject(err); } ); let res = await axios.get("http://localhost:3000/list"); console.log(res.data); }1.3.4.2、相应拦截器
Document 发送请求 // 响应拦截器 async function getData() { axios.interceptors.response.use( (config) => { // 数据回来前的一系列的处理 console.log("关闭加载动画"); console.log("对数据进行一些数据"); return config.data; //拦截后的放行 }, (err) => { // 响应错误处理 return Promise.reject(err); } ); let res = await axios.get("http://localhost:3000/list"); console.log(res.data); }1.3.4.3、取消拦截
Document 发送请求 // 请求拦截器 async function getData() { let instance = axios.create(); instance.interceptors.request.use( (config) => { // 发生请求前的一系列的处理 console.log("开启加载动画"); console.log("认证是否有token，如果没有，要去登录"); return config; //拦截后的放行 }, (err) => { // 请求错误处理 return Promise.reject(err); } ); // 取消拦截 axios.interceptors.request.eject(instance); let res = await axios.get("http://localhost:3000/list"); console.log(res.data); }2、Vue中axios的使用
2.1、基本使用
2.1.1、npm安装
终端安装：
npm install axios
2.1.2、在Vue原型上配置$axios
在vue项目的main.js文件中引入axios
// 导入axios import axios from 'axios' // 将axios放到Vue原型上，这样vm，vc身上就都有axios了 Vue.prototype.$axios=axios
2.1.3、在组件中使用：
点击发送请求 export default { name: 'App', methods: { async getDate() { let res = await this.$axios.get('http://localhost:3000/list') console.log(res.data); } } }2.2、一次封装
如果是多个组件都需要发送请求，而且每次请求前，我们都要进行一些验证处理等，可以进行简单封装
2.2.1、封装request.js
src/utils创建request.js
/* 封装axios用于发送请求 */ import axios from "axios"; /* (1)request 相当于 Axios 的实例对象 (2)为什么要有request,而不是直接用axios * 项目开发中，有可能会有两个基地址 * 不同的接口配置不同（有的要token,有的不要token） */ const request = axios.create({ baseURL: "http://localhost:3000", // 设置基地址 timeout: 2000, // 请求超时：当2s没有响应就会结束请求 }); // 添加请求拦截器，一下内容是axios的拦截器，可以不用写 request.interceptors.request.use( function (config) { // 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加 // 例如1 config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换 // 例如2 config.headers = { "Content-Type": "application/x-www-form-urlencoded", // 配置请求头 }; // 例如3 //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie const token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下 if (token) { config.params = { token: token }; // 如果要求携带在参数中 config.headers.token = token; // 如果要求携带在请求头中 } return config; //拦截后的放行 }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 添加响应拦截器 request.interceptors.response.use( function (response) { // 对响应数据做点什么 console.log('关闭请求数据动画'); console.log('对数据进行处理'); return response.data; //只要响应对象中的数据 }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } ); export default request;第一次封装，引入了基地址与拦截器
2.2.2、组件中使用
import request from '../utils/request' export default { name: 'ShowList', methods: { async getList() { // 基本路径已经配置过 let res = await request.get('/list') //这里的res也是响应拦截器里处理之后的结果 console.log(res); } } }import request from '@/utils/request'; export default { name: 'ShowUser', methods: { async getUser() { let res = await request.get('/user') console.log(res); } } }2.3、二次封装
项目当中会有很多的页面，如果每个页面中都会多次请求，将我们的请求都写在对应的页面中，比较难以维护，所以可以将请求再次进行封装，类似如下效果：
src/apis/showList.js
// 导入一次封装的request import request from "@/utils/request"; // 请求list数据 export function getListInfo1() { return request.get("/list"); } // 请求user数据 export function getUserInfo1() { return request.get("/user"); }showList.vue
import { getListInfo1, getUserInfo1 } from '../apis/showList' export default { name: 'ShowList', methods: { async getList1() { // 调用请求函数 let res = await getListInfo1() console.log(res); }, async getUser1() { let res = await getUserInfo1() console.log(res); } } }
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。
