vue axios这样封装更加简单清晰明了

安装axios

npm install axios; // 安装axios复制代码

封装axios

在src文件夹中创建api文件夹，再在api文件夹中创建axios.js文件

api.jpg

在axios.js文件中封装

import axios from 'axios'
import qs from 'qs'
// 超时时间
axios.defaults.timeout = 30000000

axios.defaults.baseURL = ROOT_URL

axios.interceptors.request.use(
  config => {
    config.method === 'post' ?
      (config.data = qs.stringify({
        ...config.data
      })) :
      (config.params = {
        ...config.params
      })
    config.headers['Content-Type'] =
      'application/x-www-form-urlencoded' //'application/json;charset=utf-8';////；

    return config
  },
  error => {
    return Promise.reject(error)
  }
)

//ajax返回请求拦截 拦截
axios.interceptors.response.use(
  data => {
    // ajax 返回状态

    const res = data.data

    // 状态不为200的时候
    if (!res.features && res.code !== 200&& res.code !== 0&& res.code !== 1 ) {

      Message({
        message: res.message,
        type: 'error'
      })
      return Promise.reject(res);

    } else {
      if (data.status) {

        return res
      } else {
        if (!res.data) return 'null'
        return res.data
      }
    }
  },
  error => {
    const errMsg = error.toString()
    const code = errMsg.substr(errMsg.indexOf('code') + 5)

    if (parseInt(code) === 401) {
    }
    return Promise.reject(error)
  }
)

在static文件夹创建common文件夹

在common文件夹下创建urlConfig.js文件来输入项目的服务后台接口的地址

  // 项目的服务后台接口的地址
  const ROOT_URL = 'http://10.16.30.31:9709/'

在api文件夹下创建urlCol.js文件

在urlCol.js文件下写后台接口集合

let rootUrl = ROOT_URL
const urlCol = {
  apiCol: rootUrl + '/url', // 接口地址
}

在api文件夹下创建apiCol.js文件

在apiCol.js文件下输入请求方式

import request from './axios'

// 引入后台接口集合
import urlCol from './urlCol'
export function apiCol(query) {
  return request({
    url: urlCol.apiCol,
    method: 'get',
    params: query
  })
}

在组件中引入就可以使用

import {
   apiCol
} from "@/api/apiCol";

getApiCol() {
  apiCol({
    id: this.id,
    keyword: this.keyword
  }).then((res) => {
    if(res.code == 200){
      ...
    }else {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    }
  })
}

最后在index.html里面引入urlConfig.js文件

第一次编写文档，若有不对的地方还请指出，多多赐教