axios模塊化封裝

1.開發環境 vuecli4
2.電腦系統 winodws10專業版
3.在開發的過程當中,咱們會進行數據的請求,我使用的是axios,下面我來分享一下我本身的封裝配置,但願對你有所幫助。
4.廢話很少說,直接上操做:

// 安裝 
npm i axios --save

5.在src目錄下進行文件夾 network(網絡的意思),目錄結構以下:

文件目錄說明:
api:統一管理接口
https:axios請求封裝

6.初版https.js問價代碼以下:

import axios from 'axios'
import qs from "qs"

/* 通常都是使用全局配置,在此我是經過建立實例的方法,優勢:當接口不在一個服務器上,咱們能夠經過這種建立實例的方法方便管理和使用 */
// // 第一種寫法
const http1 = (config, success, failure) => {
  const instance = axios.create({
    // baseURL: 'http://192.168.1.115:3000',
    timeout: 5000,
  })

  instance(config).then(res => {
    // console.log(res);
    success(res);
  }).catch(err => {
    // console.log(err);
    failure(err);
  })
}


export default {
  http1,
}

//在對應的vue模板中使用
this.$https.http1(
{
  url: '/api/api/login',
  method: 'post',
},
(res) => {
  console.log('請求成功');
  console.log(res);
}
);

7.第二版https.js問價代碼以下:

import axios from 'axios'
import qs from "qs"

/* 通常都是使用全局配置,在此我是經過建立實例的方法,優勢:當接口不在一個服務器上,咱們能夠經過這種建立實例的方法方便管理和使用 */
// // 第二種寫法
const http1 = (config) => {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      // baseURL: 'http://192.168.1.115:3000',
      timeout: 5000,
    })

    instance(config).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    })
  })
}


export default {
  http1,
}

//在對應的vue模板中使用
this.$https.http1({
 url: '/api/api/login',
 method: 'post',
 })
.then((res) => {
 console.log('請求成功啦');
 console.log(res);
});

8.第三版https.js問價代碼以下:

import axios from 'axios'
import qs from "qs"

/* 通常都是使用全局配置,在此我是經過建立實例的方法,優勢:當接口不在一個服務器上,咱們能夠經過這種建立實例的方法方便管理和使用 */
// // 第二種寫法
const http1 = (config) => {
  const instance = axios.create({
    // baseURL: 'http://192.168.1.115:3000',
    timeout: 5000,
  })
  
   // 直接 return 
  return instance(config);
  /* 
  爲何能夠這樣寫?由於axios 自己的返回值就是 Promise

  */
}

export default {
  http1,
}

//在vue組件使用方法和方案二是同樣的

9.攔截器:

/* 
攔截器分爲:
請求成功攔截
請求失敗攔截
響應成功攔截
響應失敗攔截
*/

//咱們能夠給實例添加攔截器也能夠給全局添加攔截器

10.全局攔截器:

//請求攔截
axios.interceptors.request.use((config) => {
  // console.log("全局請求攔截成功啦");
  // console.log(config);
  return config;
}, (err) => {
  // console.log("全局攔截失敗啦");
  console.log(err);
})

//響應攔截:
axios.interceptors.response.use((res) => {
  //響應攔截成功
  console.log("響應攔截成功");
  console.log(res);
  // console.log(res.data);
  return res;
  // 注意:在這裏要把(想要的數據)返回
}, (err) => {
  console.log("響應攔截失敗");
  console.log(err);
})

11.請求方法封裝:

//全局請求方法
// // 封裝axios的post請求
const post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, qs.stringify(params))
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};

// 封裝axios的put請求
const put = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};

// 封裝axios的delete請求
const del = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};
const get = (url, query) => {
  return axios.get(url, query);
};

const $axios = {
  post: post,
  get: get,
  put: put,
  delete: del
};

//實例請求方法能夠寫在實例裏面,方法相同

12.api.js代碼:

/* 
統一接口管理,項目中有不少接口,咱們在進行一些操做的時候時候在不一樣的文件會調用不少相同的接口,若是接口發生了變化,修改接口就成了一個很被動的,並且耗費大量的時間。
*/
import https from '@/network/https.js';

//實例方法調用
// export default function clogin() {
//   return https.http1().post('/api/api/login');
// }

// let clogin = () => {
//  return https.http1().post('/api/api/login');
// }

let clogin = () => {
  return https.$axios.post('/api/api/login');
}

export {
  clogin
}

13.在對應的vue模板中使用:

import { clogin } from '../network/api.js';
// import { clogin } from '@/network/api.js';

//在對應的方法中使用
clogin().then((res) => {
 console.log('請求成功啦');
 console.log(res);
})
.catch((err) => {
 console.log('請求失敗啦');
 console.log(err);
});

14.get請求傳參:

let aa = {
 a: '222',
 b: '999',
};

clogin({ params: aa }).then((res) => {
 console.log('請求成功啦');
 console.log(res);
})
.catch((err) => {
  console.log('請求失敗啦');
console.log(err);
});

15.post請求傳參:

let aa = {
 a: '222',
 b: '999',
};

clogin(aa).then((res) => {
 console.log('請求成功啦');
 console.log(res);
})
.catch((err) => {
 console.log('請求失敗啦');
 console.log(err);
});

16.本期的分享到了這裏就結束啦,但願對你有所幫助,讓咱們一塊兒努力走向巔峯。