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 参考文章

参考文章

参考代码