vue axios简单封装

  • A+
所属分类:Web前端
摘要

「 快捷方式(win+r)」 –> 「 cmd」 –> 「 输入vue ui」 –> 「 自动会跳转8000端口(默认)」


0 环境

  • 系统环境:win10
  • 前端编辑器:vscode
  • 依赖:axios

1 axios安装

1 方式1(命令操作)

// 安装axios(创建的vue项目的根目录)
npm install axios; 

2 方式2(可视化界面操作)

快捷方式(win+r) --> cmd --> 输入vue ui --> 自动会跳转8000端口(默认)

vue axios简单封装
启动vue ui
vue axios简单封装
添加插件
vue axios简单封装
安装插件时间 稍等一会

2 封装axios

可以配合全局拦截(请求拦截+响应拦截) 自行搜索

1 新建http.js

vue axios简单封装
新建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),
      timeout10000
    });
  },
  put(url, data) {
    return axios({
      method"put",
      url`${baseURL}${url}`,
      data: qs.stringify(data),
      timeout10000
    });
  },
  delete(url, data) {
    return axios({
      method"delete",
      url`${baseURL}${url}`,
      // url,
      data: qs.stringify(data),
      timeout10000,
      headers: {
        "Content-Type""application/x-www-form-urlencoded"
      }
    });
  },
  get(url, params) {
    return axios({
      method"get",
      url`${baseURL}${url}`,
      params: params, // get 请求时带的参数
      timeout10000
    });
  }
}

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

参考文章

参考代码