vue封装axios以及调用

需求:为了代码更好管理和更美观,把axios进行封装了post,get请求,当然所有的请求接口也可以单独用一个js文件进行管理

一、http.js(封装axios得post,get请求,post请求传参得时候要注意,除了qs,传的数组还需要提前JSON.stringify),网上有很多资料关于封装axios,如果你有其他的功能需要,可以搜索进行再一次的封装,更符合自己的需求

import axios from 'axios';
import qs from 'qs';

class Http {
  constructor() {
    this.axiosInstance = axios.create({timeout: 30000});
  }

  async get(url, params) {
    const res = await this.axiosInstance.get(url, {params:params});
    return res.data;
  }

  /**
   * axios post请求
   * @param url=服务器地址
   * @param params=请求参数
   * @param encode = (如需要传送application/x-www-form-urlencoded格式参数,使用qs.stringify转换) 如果参数是数组的形式,传参数的时候先JSON.stringify()转化数组,再传过来
   * @param config :object axios得配置
   * @returns {Promise<*>}
   */
  async post(url, data,config={}) {
    data = qs ? qs.stringify(data) : data;
    const res = await this.axiosInstance.post(url, data,config);
    return res.data;
  }

  async put(url, data) {
    const res = await this.axiosInstance.put(url, data);
    return res.data;
  }

  async delete(url, data) {
    const res = await this.axiosInstance.delete(url, data);
    return res.data;
  }
}

export default new Http()

 

二、引用:请求的地址都写在一个js文件得,如下:api.js,因为和http.js是同级,所以引入地址是./

/**
 * 所有的请求
 * **/
import $http from './http';

export const APIService = {
  /* 批量导出成绩/作业 */
  async exportHomework(info){
    const res = await $http.post('/download_transcript/',info);
    return res;
  },

 /* 获取某班级所有学生信息 */
async getStudentInfo(info){
    const res = await $http.get('/query_students/',info);
     return res;
 },

}

 

三、vue得组件调用请求

 

import { APIService } from "../../../service/api";

 

methods里调用:以post为例,因为axios的post请求方式的参数以及参数的格式比get需要注意的事项多一些(这里的逻辑仅供参考)

/* 重命名作业 */
upDateHomeworkName(index, row){
  this.$prompt("请输入新的作业名称", "重命名", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputPlaceholder:row.name,
  })
    .then(({ value }) => {
        //因为是post请求,这里得数组参数都需要JSON.stringify,然后post参数还需要qs处理
      //不然post方式请求参数会出错,get就正常调用
      let updateinfo = {
        name:value,
        classes:JSON.stringify(this.classvalue),
        work_id:row.work_id,
        deadline:this.timevalue,
        brief:this.synopsisi,
        strategy_file_ids:JSON.stringify(this.strategy_file_ids),
        notebook_file_ids:JSON.stringify(this.notebook_file_ids),
        local_file_ids:JSON.stringify(this.local_file_ids)
      }
      
      APIService.getStudentInfo(updateinfo)
    })
},

 自此,vue中封装axios的get\post请求以及封装所有的接口,vue文件直接进行调用接口文件的api的思路到此,欢迎交流

 

发布了57 篇原创文章 · 获赞 11 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览