vue封装axios请求

封装axios

在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。

import axios from 'axios'; // 引入axios   安装方法：npm i axios -S
import qs from 'qs'; // 引入qs模块         安装方法：npm install qs --save

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 function get(url, params) {
  // console.log(url, params);
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 */
export function post(url, data, contentType) {
  // console.log(contentType ? contentType: 'application/json')
  // console.log(url, data);
  return new Promise((resolve, reject) => {
    axios
      .post(url, qs.stringify(data), {  // qs.stringify(data)不加这句的话，post请求会变成OPTIONS方式，也是为了解决post请求会变成OPTIONS方式
        headers: {
          // "Content-Type": contentType ? contentType : "application/json",
          'Content-Type':'application/x-www-form-urlencoded'
        },
      })
      .then(res => {
        if (res.data.Code == 200) {  //res.data.Code我这里是后台返回的是大写的Code
          resolve(res);
        } else {
          message.error(res.data.Msg);   ///同上
        }
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * put方法，对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '加载失败', type: 'error'});

        message.error("加载失败");
      });
  });
}

/**
 * delete
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function deletedata(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '加载失败', type: 'error'});
        message.error("加载失败");
      });
  });
}

function checkLogin(res) {
  // console.log(res)
  // res = JSON.parse(res)
  // console.log(res.data);
  if (res.data.code === 401) {
    message.error(res.data.msg);
    router.push({
      //核心语句
      // path: "/login", //跳转的路径  我这没有用到登录方法，需要用到的自己写需求
    });
    return false;
  } else if (res.data.code === 403) {
    message.error("权限不足");
    return false;
  } else if (res.data.code === 500) {
    message.error("服务器内部错误");
    return false;
  } else {
    return res;
  }
}

API文件调用request文件
在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。
这里只用到了get和post。
接口比较少 没有详细划分模块，如果模块比较多的话，可以在API文件下面多建几个js文件，类似下面这样：

import {
  get,
  post,
  deletedata,
  put
} from "@/utils/request";    //引入request文件（就是封装axios请求的文件）

var baseURL = "http://xxxx";  //接口地址
//产品列表
export const goodsList = params => get(baseURL + "goods/goodslist", params);

//新闻列表
export const newsList = params => get(baseURL + "news/newslist", params);

//提交表单
export const addleavemessage = data => post(baseURL + "leave_message/addleavemessage", data);

在page文件中使用API文件

import { goodsList, addleavemessage } from "@/api/api";   //引用API文件

//get请求
goodsList()
	.then((res) => {
    	this.productList = res.data;
       // console.log(this.productList);
   })
   .catch((err) => {
     console.log(err, "错误信息");
});

//post请求
addleavemessage({   //需要的参数
	name: " ",
	 email:" ",
}).then((res) => {
	 	if (res.data.Code == 200) {
		this.$Message.success("提交成功!");
	}
});