vue 封装请求

创建文件夹

http.js

import axios from 'axios';
// 设置请求超时时间和域名  创建axios实例
const instance = axios.create({
  baseURL: '127.0.0.1',
  timeout: 5000
})

//  http request 拦截器
instance.interceptors.request.use(
  config => {
    // console.log(config)
    // config.data = JSON.stringify(config.data)
    config.headers = {
      // 'Content-Type': 'application/x-www-form-urlencoded'
      'Content-Type': 'application/json'
    }
    return config
  }, err => {
    return Promise.reject(err)
  }
)

//  响应拦截器即异常处理
instance.interceptors.response.use(response => {
  return response
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log('错误请求')
        break
      case 401:
        console.log('未授权，请重新登录')
        break
      case 403:
        console.log('拒绝访问')
        break
      case 404:
        console.log('请求错误,未找到该资源')
        break
      case 405:
        console.log('请求方法未允许')
        break
      case 408:
        console.log('请求超时')
        break
      case 500:
        console.log('服务器端出错')
        break
      case 501:
        console.log('网络未实现')
        break
      case 502:
        console.log('网络错误')
        break
      case 503:
        console.log('服务不可用')
        break
      case 504:
        console.log('网络超时')
        break
      case 505:
        console.log('http版本不支持该请求')
        break
      default:
        console.log(`连接错误${err.response.status}`)
    }
  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response)
})

/**

* 封装get方法

* @param url

* @param data

* @returns {Promise}

*/

function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params
    })
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })

}

/**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}

/**

* 封装patch请求

* @param url

* @param data

* @returns {Promise}

*/

function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.patch(url, data)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })

}

/**

* 封装put请求

* @param url

* @param data

* @returns {Promise}

*/

function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.put(url, data)
      .then(response => {
        resolve(response.data)
      }, err => {
        reject(err)
      })
  })
}
/**

* 封装delete请求

* @param url

* @param data

* @returns {Promise}

*/
 function del(url,params){
  return new Promise((resolve,reject)=>{
    instance.delete(url,params).then(response=>{  //这里传递的参数不做处理
             resolve(response.data);
       },err=>{
             reject(err);
       }).catch((error)=>{
             reject(error);
       })
  })
}

//  开放接口

export default {
  get: get,
  post: post,
  put: put,
  patch: patch,
  del:del
}

api.js

import login from './page/login'
import companies from './page/companies'

export const api = {
//登录模块
  login,
  //企业列表
  companies,
}

在创建一个文件夹 把api分模块管理

import http from '../http'

export  default {
    //登录请求
  login(data) {
    return http.post('/api-admin/login', data)
  },
}

main.js

import {api} from './axios/api'
Vue.prototype.$api = api;

.vue

delete特别注意