Vue 封裝axios(四種請求)及相關介紹(十三)

騰騰愛吃糖果 發表於 2020-06-29

Vue 封裝axios(四種請求)及相關介紹

首先axios是基於promise的http庫

promise是什麼?
1、主要用於非同步計算
2、可以將非同步操作佇列化,按照期望的順序執行,返回符合預期的結果
3、可以在物件之間傳遞和操作promise,幫助我們處理佇列

一.首先安裝axios

npm install axios; // 安裝axios

二.引入axios

我是根據網上學習的,在目錄下新建一個資料夾,新建兩個檔案 http.js 和 api.js
為什麼要新建這兩個檔案, 我們在請求的時候 , 肯定要寫介面地址和引數吧,所以我們用http.js 寫四個請求方式 ,在api.js 裡面去呼叫,然後把所有的介面地址寫在api.js 裡面 ,這樣可以集中修改介面地址,方便管理。
請求是請求
地址是地址

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模組,用來序列化post型別的資料,後面會提到
// Antdesign的全域性提示外掛
import { message } from "ant-design-vue"; 

配置 axios的操作 及 四種請求

// 在http.js中引入axios
import { message } from "ant-design-vue"; // 引入axios
import axios from "axios";
import router from "@/router";

// 設定超時時間
axios.defaults.timeout = 10000;
// 設定預設post的請求頭
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

// 新增token 在登入成功後進行設定
export function setToken(token) {
  axios.defaults.headers.common["Authorization"] = "Bearer " + token;
}

/**
 * get方法,對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function get(url, params) {
  console.log(url, params);
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * post方法,對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function post(url, params, contentType) {
  // console.log(contentType ? contentType: 'application/json')
  console.log(url, params);
  return new Promise((resolve, reject) => {
    axios
      .post(url, params, {
        headers: {
          "Content-Type": contentType ? contentType : "application/json",
        },
      })
      .then(res => checkLogin(res))
      .then(res => {
        if (res.data.code == 0) {
          resolve(res);
        } else {
          console.log(res);
          message.error(res.data.msg);
        }
      })
      .catch(err => {
        reject(err);
      });
  });
}

/**
 * put方法,對應put請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '請求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '載入失敗', type: 'error'});

        message.error("載入失敗");
      });
  });
}

/**
 * delete
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 */
export function deletedata(url, params) {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(res => checkLogin(res))
      .then(res => {
        resolve(res);
        // Loading.service(true).close();
        //  Message({message: '請求成功', type: 'success'});
      })
      .catch(err => {
        reject(err);
        // Loading.service(true).close();
        // Message({message: '載入失敗', type: 'error'});
        message.error("載入失敗");
      });
  });
}

function checkLogin(res) {
  // console.log(res)
  // res = JSON.parse(res)
  console.log(res.data);
  if (res.data.code === 401) {
    message.error(res.data.msg);
    router.push({
      //核心語句
      path: "/login", //跳轉的路徑
    });
    return false;
  } else if (res.data.code === 403) {
    message.error("許可權不足");
    return false;
  } else if (res.data.code === 500) {
    message.error("伺服器內部錯誤");
    return false;
  } else {
    return res;
  }
}

// function parseJSON(response) {
//   return response.json();
// }

這個地方按理說是寫一個 攔截器 (axios是有直接攔截 請求之前 響應攔截) 但是沒有來急 就寫了 checkLogin 直接方法判斷 有時間我回來改

注意

這個裡面的post請求 做了修改 就是請求的時候 響應頭可能不一樣 所以我們直接進行判斷 要是沒有使用預設,有的話用傳進來的

三.介面管理

/**
 * api介面統一管理
 */
// eslint-disable-next-line no-unused-vars
import QS from "qs";
//引入進來四種方式
import {get, post, deletedata, put} from "./http";
//這是和代理相對應的頭
var baseURL = "engine/";

//舉例子:
//這是post的,需要進行序列化的
export const login = data => post(baseURL + "login/account", QS.stringify(data), "application/x-www-form-urlencoded");
//post直接用的
export const projectlist = data => get(baseURL + "projects/page", data);
//等等 反正就是這個意思  名字自己起就行  data是來的引數
//QS.stringify(data) 序列化引數 放到url使用
//"application/x-www-form-urlencoded" 這是傳的響應頭的  上面的注意 裡面說了 post方法進行了處理

四.頁面進行請求

//直接進行引入api.js裡面的方法 傳引數 接受回撥
//舉例子
import {login } from "../../../Api/api"; // 匯入我們的api介面
 getPeople(
 {
	name:"小坦克",
	password:"3485"
 }
 ).then(res => {
     console.log(res)
 });
//其他的跟這個一個意思

五.設定代理

在 vue.config.js 檔案裡面 進行設定 注意proxy裡面的別寫錯了 和請求的對應起來

    devServer: {
        //proxy:{'/api':{}},代理器中設定/api,專案中請求路徑為/api的替換為target
        proxy: {
            '/engine': {
                // http://192.168.0.19:8082/engine
                target: 'http://192.168.0.19:8082/engine',//代理地址,這裡設定的地址會代替axios中設定的baseURL

                changeOrigin: true,// 如果介面跨域,需要進行這個引數配置
                //ws: true, // proxy websockets
                //pathRewrite方法重寫url
                pathRewrite: {
                    '^/engine': '/'
                    //pathRewrite: {'^/api': '/'} 重寫之後url為 http://192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重寫之後url為 http://192.168.1.16:8085/api/xxxx
                }
            }
        }
    }

為什麼設定代理 就是讓所有的請求都走這個代理 ,你也可以設定多個代理保證名字別寫錯就行,也可以不設定代理,直接寫url請求也行 ,總之不是大問題
看看這個,講代理的意思的
代理的那些事

六.說一下請求頭

大體用三種:
application/x-www-form-urlencoded
multipart/form-data
application/json
http協議是建立在tcp/ip協議之上的應用層協議,主要包括三個部分,狀態行,頭部資訊,訊息主體。對應一個http請求就是:請求行,請求頭,請求體。
這個講的很細 有時間抄過來
https://blog.csdn.net/u014209205/article/details/81147783

總結:具體使用就是三個部分 請求方法(http.js) 請求地址(api.js) 進行請求傳參得到回撥(頁面呼叫)

參考別人寫的好的
vue中Axios的封裝和API介面的管理https://juejin.im/post/5b55c118f265da0f6f1aa354
Axios的封裝
幾種響應頭https://blog.csdn.net/u014209205/article/details/81147783
代理的那些事https://www.jianshu.com/p/3de259ecc76e
Vue中axios攔截器,傳token給後端https://www.jianshu.com/p/2035b1e923b2
promise是什麼https://www.jianshu.com/p/1b63a13c2701