欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

axios封装方式

程序员文章站 2022-07-04 16:41:39
axios封装...

1、封装axios方式一

首先安装axios

npm install axios

其次编写request.js

import axios from 'axios'
//创建axios实例
const service = axios.create({
  baseURL: 'http://192.168.70.130:7300/mock/5eecd9d60841b906a35efe0d/tensquare',
  timeout: 30000 //请求超时时间
});
export default service;

再其次引入request编写api

gathering.js

import request from '@/utils/request'

const api_name = 'gathering';

//调用接口查询活动列表
export default {
    list() {
        return request({
            url: `/api/${api_name}`,
            method: 'get'
        })
    },
    search(page, size, searchMap) {
        return request({
            url: `/${api_name}/search/${page}/${size}`,
            method: 'post',
            data: searchMap
        })
    },
    findById(id) {
        return request({
            url: `/${api_name}/${id}`,
            method: 'get'
        })
    }

}

最api的调用

import gatheringApi from "~/api/gathering";
export default {
  data() {
    return {
      pageNo: 1,
    };
  },
  asyncData() {
    return gatheringApi.search(1, 12, {}).then((res) => {
      return { items: res.data.data.rows };
    });
  },
  methods: {
    loadMore() {
      gatheringApi.search(this.pageNo++, 12, {}).then((res) => {
        this.items = this.items.concat(res.data.data.rows);
      });
    },
  },
};

本文地址:https://blog.csdn.net/qq_26786441/article/details/108691872

相关标签: axios