Vue 封装axios(四种请求)及相关介绍
首先axios是基于promise的http库
promise是什么?
1、主要用于异步计算
2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果
3、可以在对象之间传递和操作promise,帮助我们处理队列
一.首先安装axios
npm install axios; // 安装axios
二.引入axios
我是根据网上学习的,在目录下新建一个文件夹,新建两个文件 http.js 和 api.js
为什么要新建这两个文件, 我们在请求的时候 , 肯定要写接口地址和参数吧,所以我们用http.js 写四个请求方式 ,在api.js 里面去调用,然后把所有的接口地址写在api.js 里面 ,这样可以集中修改接口地址,方便管理。
请求是请求
地址是地址
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到
// Antdesign的全局提示插件
import { message } from "ant-design-vue";
配置 axios的操作 及 四种请求
// 在http.js中引入axios
import { message } from "ant-design-vue"; // 引入axios
import axios from "axios";
import router from "@/router";
// 设置超时时间
axios.defaults.timeout = 10000;
// 设置默认post的请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
// 添加token 在登录成功后进行设置
export function setToken(token) {
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
}
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export funct