axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍

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