vue如何自定义封装axios库

1. 创建文件 http.js

2. 导入axios

import axios from "axios"

 3. 配置全局信息请求

//配置全局路径,如何配置了vue的网络代理则直接使用代理前缀即可
let baseURL = "/netRequest"

//设置全局发送的请求数据的类型为json
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';

//创建全局http请求
const $http = axios.create({
    baseURL
})

//设置全局请求过滤器
$http.interceptors.request.use(config => {
  return config
})

// 设置全局响应过滤器
$http.interceptors.response.use(config => {
  return config
})

4. 用全局$http发送http请求

//封装post请求
function requestPost(url,netInfo) {
  return new Promise((resolve, reject) => {
    //发送post请求
    $http.post(url,JSON.stringify(netInfo)).then(res => {
      //成功
      resolve(res.data)
    }).catch(err => {
      //失败
      reject(err.data)
    })
  })
}
//封装get请求
function requestGet(url) {
  return new Promise((resolve, reject) => {
    $http.get(url).then(res => {
      //成功
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
//封装post请求
function requestDelete(url) {
  return new Promise((resolve, reject) => {
    $http.delete(url).then(res => {
      //成功
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
//封装put请求
function requestPut(url,netInfo) {
  return new Promise((resolve, reject) => {
    $http.put(url,JSON.stringify(netInfo)).then(res => {
      //成功
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

 4. 导出接口

//导出接口
export {requestPost,requestGet,requestPut,requestDelete,requestFilePost}

 

5. 调用

//导入http.js文件
import {requestGet} from "../network/http.js";

//调用自定义方法
requestGet(url).then(res => {
    //请求成功时调用的代码区
})