vue axios簡單封裝

0 環境

• 系統環境：win10
• 前端編輯器：vscode
• 依賴：axios

1 axios安裝

1 方式1(命令操做)

// 安裝axios(建立的vue項目的根目錄)
npm install axios; 

2 方式2(可視化界面操做)

❝

「快捷方式(win+r)」 --> 「cmd」 --> 「輸入vue ui」 --> 「自動會跳轉8000端口(默認)」

❞

啓動vue ui

添加插件

安裝插件時間 稍等一會

2 封裝axios

❝

能夠配合全局攔截(請求攔截+響應攔截) 自行搜索

❞

1 新建http.js

新建http.js

2 curd封裝

import axios from "axios";
import qs from "qs";

let baseURL = "http://127.0.0.1:8080/";
// let baseURL = "";

// const test = {} 替換 export default
export default {
  post(url, data) {
    return axios({
      method: "post",
      url: `${baseURL}${url}`,
      data: qs.stringify(data),
      timeout: 10000
    });
  },
  put(url, data) {
    return axios({
      method: "put",
      url: `${baseURL}${url}`,
      data: qs.stringify(data),
      timeout: 10000
    });
  },
  delete(url, data) {
    return axios({
      method: "delete",
      url: `${baseURL}${url}`,
      // url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    });
  },
  get(url, params) {
    return axios({
      method: "get",
      url: `${baseURL}${url}`,
      params: params, // get 請求時帶的參數
      timeout: 10000
    });
  }
}

3 引用

1 局部引用

• 頁面引用

// 引入http.js
import http from '../utils/http'

abc(){
 // 例如 md?articleId=1
  var url = "後端路徑";
  
  // 參數
  var params = {
    id: id,
    key: value
  }
  // 好比在方法中調用get 
  http.get(url, params).then(resp => {
    內容
  })
}

2 全局引用(main.js)

❝

參考文章裏最下面有

❞

• main.js

import api from '../utils/http' // 導入api接口

Vue.prototype.$api = api; // 將api掛載到vue的原型上

• 具體頁面方法

this.$api.get()

// 如果不行 在http.js 將export default 替換爲 const test = {}
this.$api.test.get()

3 全局引用(store中配置)

❝

只是爲了學習一下store actions

❞

• store index.js

actions: {
    get(_, params){
      // var url = reqParams.url;
      // var params = reqParams.params;
      // console.log("url ==>",url);
      console.log("params ==>",params);
      return http.get(params.url, params.params);
    },
    async post(_, reqParams){
      var url = reqParams.url;
      var params = reqParams.params;
      return await http.post(url, params);
    },
    put(_, reqParams){
      var url = reqParams.url;
      var params = reqParams.params;
      return http.put(url, params);
    },
    delete(_, reqParams){
      var url = reqParams.url;
      var params = reqParams.params;
      return http.delete(url, params);
    }
}

• 具體頁面

demo(id){
      var url = "test/adc/";
      
      var params = {
        id: id
      }

      var data = {
        url: url,
        params: params
      }

      this.$store.dispatch("get", data).then(resp => {
        console.log("resp -->", resp);
      })
}

4 參考文章

參考文章

參考代碼