Axios

什么是axios?

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

参考文档:axios中文文档|axios中文网 | axios (axios-js.com)

在每一个项目当中，我们都会用到axios去请求接口，所以说axios是必不可少的,接下来让我们了解一下axios吧!

想要使用，就必须先安装

安装axios:

npm命令安装:
安装命令:npm install axios

bower命令安装:
安装命令:bower install axios

在项目中，安装完成axios之后，我们可以去项目当中的package.json文件中查看我们是否安装成功axios:
这个我们就是安装成功了!
然后就是创建文件夹和文件了

文件创建

我们在项目的src文件下创建一个名为utils的文件 utils文件作用:此文件狭存放自己封装的工具类函数，是一个共享的方法,如:封装axios，封装cookie等方法都可以放置在这个文件下
在utils文件下，我们需要新建一个http.js的js文件，这个文件就是放置我们封装axios(axios拦截器)的文件了! axios拦截器参考官网:axios中文文档|axios中文网 | axios (axios-js.com)

配置axios:

我们需要在http.js文件中引入我们安装的axios：

import axios from "axios"

使用由库提供的配置的默认值来创建实例,实例化我们的axios:

var instance = axios.create({
baseURL:""//该部分写的是我们使用接口的公共代理
timeout:2500//请求时间，在超时前，所有请求都会等待 2.5 秒，由于网络原因，我们可以把时间修改的长一点
});

添加请求拦截器:

//**该部分的instance是与上面的实例化的名字是一致的，实例化名字是什么，这里就是什么(必需修改)
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //如果我们的使用的接口需要配置headers请求头或者body请求，可以再改部分添加
    //headers请求头:config.headers["字段名"]="字段值" + token值
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

添加响应拦截器:

//**该部分的instance是与上面的实例化的名字是一致的，实例化名字是什么，这里就是什么(必需修改)
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //对数据进行处理,如：脱壳
    let {data} = response
    return data
    或
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

写到这里，我们的axios基本功能已经配置完成了，我们还可以在我们的文件当中配置几个我们经常用的请求方法,如:post,get,put,delete等请求方法,post方法与put方法是一样的，delete方法与get方法是一样的,只需要更改方法名称就可.

四种请求方法:

post方法:

const post = (url,data)=>{
 return new Promise((resolve,reject)=>{
    //这里的instance与实例化axios的变量名一致
   instance.post(url,data).then(res=>{
     resolve(res)
   }).catch(err=>{
     reject(err)
   })
 })
}

put方法:

const put = (url,data)=>{
 return new Promise((resolve,reject)=>{
    //这里的instance与实例化axios的变量名一致
   instance.put(url,data).then(res=>{
     resolve(res)
   }).catch(err=>{
     reject(err)
   })
 })
}

get方法:

const get = (url,data)=>{
 return new Promise((resolve,reject)=>{
    //这里的instance与实例化axios的变量名一致
   instance.get(url,{params:data}).then(res=>{
     resolve(res)
   }).catch(err=>{
     reject(err)
   })
 })
}

delete方法:

//这个的变量名称不能直接使用delete，因为delete是关键字
const deleter = (url,data)=>{
 return new Promise((resolve,reject)=>{
    //这里的instance与实例化axios的变量名一致
   instance.delete(url,{params:data}).then(res=>{
     resolve(res)
   }).catch(err=>{
     reject(err)
   })
 })
}

总结:

以上就是我们axios文件中需要配置的东西，大致如下:

import axios from "axios";
import { Message } from "element-ui";
import qs from "qs";
import { getCookie } from "./cookie";
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
const instance = axios.create({
  baseURL: "/api",
  timeout: 250000,
});
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    let token = getCookie("token");
    config.headers["Authori-zation"] = "Bearer " + token;
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.data.status !== 200) {
      Message.error(response.data.msg);
    }
    return response.data;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

const get = (url, data) => {
  return new Promise((resolve, reject) => {
    instance
      .get(url, { params: data })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
const deleter = (url, data) => {
  return new Promise((resolve, reject) => {
    instance
      .delete(url, { params: data })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
const post = (url, data) => {
  return new Promise((resolve, reject) => {
    instance
      .post(url, data)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
const put = (url, data) => {
  return new Promise((resolve, reject) => {
    instance
      .put(url, data)
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};
export { get, post, deleter, put };

我们需要用到文件当中的方法的时候，可以直接在当前页面引用:import {post,get,delete,put} from "@/utils/http"

关于vue中axios封装