axios 二次封装

1、安装

npm i axios

2、封装方法

• 方法一

import axios from 'axios'
import {
	Message
} from 'element-ui'
var Qs = require('qs'); // 处理 post 请求参数

const http = {}

// 创建axios
const instance = axios.create({
	timeout: 5000,
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded'
	},
	withCredentials: true, // 表示跨域请求时是否需要使用凭证(携带 cookie)
})

// 请求拦截
instance.interceptors.request.use(config => {
	return config
}, err => {
	return Promise.reject(err)
})

// 响应拦截
instance.interceptors.response.use(res => {
	if (res.status === 200) {
		switch (res.data.code) {
			case 10001:
				Message.warning({
					message: res.data.msg
				})
				break;
            ...
		}
		return res.data;
	}
}, err => {
	return Promise.reject(err.response)
})

// get请求
http.get = function (url, data = {}) {
	return new Promise((resolve, reject) => {
		instance.get(url, {
			params: data
		}).then(res => {
			resolve(res)
		}).catch(err => {
			reject(err);
		})
	})
}

// delete请求
http.del = function (url, data = {}) {
	return new Promise((resolve, reject) => {
		instance.delete(url, {
			params: data
		}).then(res => {
			resolve(res)
		}).catch(err => {
			reject(err);
		})
	})
}

// post请求
http.post = function (url, data) {
	return new Promise((resolve, reject) => {
		instance.post(url, Qs.stringify(data)).then(res => {
			resolve(res)
		}).catch(err => {
			reject(err);
		})
	})
}

export default http

• 方法二

function request(options) {
  options.method = options.method || "get";
  if (options.method.toLowerCase() == "get") {
    options.params = options.data;
  }
  return instance(options);
}

export default request;

3、封装函数

• 方法一

import axios from "@/utils/axios";

const url = {
    'Register': '/register', // 注册
    'SendMailCode': '/send/mail/code', // 发送邮箱验证码
}

// 注册
export const register = data => axios.post(url.Register, data)

// 获取验证码
export const sendMailCode = email => axios.post(url.SendMailCode, {
    email
})

• 方法二

export default {
  getData(params) {
    return request({
      method: "get",
      url: "/data",
      data: params
    });
  },
};

4、使用

import { register, sendMailCode } from '@/api/login';

methods: {
    register() {
      let that = this;
      that.loading = true;
      register(that.registerForm)
        .then((res) => {
          if (res.data.code == 1000) {
            that.goLogin();
          }
          that.loading = false;
        })
        .catch((err) => {
          that.loading = false;
        });
    },
}

5、axios 参考文档