vue中axios的使用與封裝

王_ye發表於2018-11-12
VueiOS封裝

vue中axios的使用與封裝

分享下我自己的axios封裝，多多點贊收藏~
axios是個很好用的外掛，都是一些params物件，所以很方便做一些統一處理

當然首先是npm安裝axios 很簡單$ npm install axios --save
在src下新建資料夾 service / index.js
接著上程式碼

import axios from `axios`;
import { Toast} from `mint-ui`;// 我用的mint的框架來彈出我的錯誤返回 大家可以用別的提示
import router from `../router`

// 預設超時設定
axios.defaults.timeout = 50000;

// 相對路徑設定
axios.defaults.baseURL =``;

//http request 攔截器
axios.interceptors.request.use(
  config => {
    // 獲取token
    const token = localStorage.getItem(`cc_token`);
    // 設定引數格式
    if(!config.headers[`Content-Type`]){
      config.headers = {
        `Content-Type`:`application/json`,
      };
    }
    // 新增token到headers
    if(token){
      config.headers.token = token
    }
    // 鑑權引數設定
    if(config.method === `get`){
       //get請求下 引數在params中，其他請求在data中
      config.params = config.params || {};
      let json = JSON.parse(JSON.stringify(config.params));
      //一些引數處理
    }else{
      config.data = config.data || {};
      //一些引數處理
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

以上請求之前的一些處理就完成了
下面是獲得返回的一些處理

//http response 攔截器
axios.interceptors.response.use(
  response => {
    //一些統一code的返回處理
    if(response.data.code === 501){
      // 登入驗證
      //做了個示例跳轉專案中登入，並記錄下相對路徑
      router.push({
        name:`login`,//從哪個頁面跳轉
        query:{
          retUrl:window.location.href.split(`#`)[1] || ``,
          is_new_user_url:1
        }
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
);

接著把所有請求型別都做下簡單封裝


/**
 * 封裝get方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
      .then(response => {
        if(response.data.code === 200){
        //返回成功處理  這裡傳的啥 後續呼叫的時候 res就是啥
          resolve(response.data.data);//我們後臺所有資料都是放在返回的data裡所以這裡統一處理了
        }else{
        //錯誤處理
          Toast(response.data.msg)
        }
      })
      .catch(err => {
        reject(err);
        let message = `請求失敗！請檢查網路`;
        //錯誤返回
        if(err.response)message=err.response.data.message;
        Toast(message)
      })
  })
}

/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.post(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          Toast(response.data.msg)
        }
      },err => {
        reject(err);
        let message = `請求失敗！請檢查網路`;
        if(err.response)message=err.response.data.message;
        Toast(message)
      })
  })
}

/**
 * 封裝patch請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          Toast(response.data.msg)
        }
      },err => {
        reject(err);
        let message = `請求失敗！請檢查網路`;
        if(err.response)message=err.response.data.message;
        Toast(message)
      })
  })
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          Toast(response.data.msg)
        }
      },err => {
        reject(err);
        let message = `請求失敗！請檢查網路`;
        if(err.response)message=err.response.data.message;
        Toast(message)
      })
  })
}

export function del(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.delete(url,data)
      .then(response => {
        if(response.data.code === 200){
          resolve(response.data.data);
        }else{
          Toast(response.data.msg)
        }
      },err => {
        reject(err);
        let message = `請求失敗！請檢查網路`;
        if(err.response)message=err.response.data.message;
        Toast(message)
      })
  })
}

好了 主要的檔案編輯好 然後在service中新建api.js檔案並引入對應元件方法

import Vue from `vue`;
import {post,fetch,patch,put,del,upload,ret2} from `./index`
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;

接著就可以開始寫各個API方法了


//也可以不需要
const _baseUrl=process.env.API_URL;//這裡我在專案配置檔案裡面設定了相對路徑
//登入方法
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
  return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//修改賬號資訊RESTful
const editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
  return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//等等...

最後是使用，非常簡單方便，在vue檔案中引入並使用

  import { loginApi ,editAdminListApi } from "../../service/api";
    export default {
        methods：{
            //登入
            login(){
                let json = {
                    userName:`xx`,
                    password:`xx`
                }
                loginApi().then(res=>{
                    console.log(res)
                })
            },
            // RESTful 修改資訊
            editAdminList(){
                let id = 1;
                let json = {name:11};
                editAdminListApi(id,json).then(res=>{
                    console.log(res)
                })
            }
        }
    }

至此就都結束了！
謝謝大家！希望多點贊多收藏 謝謝！

相關文章