Vue中axios请求二次封装

1.Axios 是什么

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js
• 创建 http 请求
• 支持 Promise API 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

1.安装axios

$ npm install axios

2.在Vue中二次封装并使用

mian.js引入并挂载到Vue实例中

import axios from 'axios'
Vue.prototype.$axios = axios

2.1二次封装axios请求

在scr目录下新建utils文件夹，并在utils文件夹下新建request.js

import axios from 'axios';
let baseURL = 
 process.env.NODE_ENV == 'production' ? '生产环境' : '开发环境'
 // 创建基础地址
 const service = axios.create({
   baseURL
 })
 service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['apiToken'] = getToken()
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)
 service.interceptors.response.use(
  res => {
    if (response.status === 200) {
      return res.data;
    } else {
      Promise.reject(res.data);
    }
  },
  err => {
    console.log(err);
    return Promise.reject(err);
  }
);
export default service;

2.2创建API请求

在src目录下新建api文件夹，并在此文件夹下新建index.js

// 引入request
import request from '../../utils/request'
// 审批表单
export const getApprovalForm = params => {
  return request({
  	//请求地址，会自动匹配baseurl
    url: '/approve/getApprovalForm',
    // 请求方式
    method: 'GET',
    //请求参数
    params
  })
}

Vue页面使用

// 引入函数
import {getApprovalForm} from '../api/index.js'

// 接口请求方法
async getAppForm(){
let res = await getApprovalForm({id:1})
	if(res.code == 0){
	// code == 0请求成功
	}
}