vue请求封装，http-接口部分（文档笔记）

http-接口

目录结构

.
├── src                                 源码目录
│    ├── http                           请求封装
│    │    ├── modules                   请求所属模块
│    │    │      ├──  example.js        example模块请求
│    │    │      ├──  xxx.js            xxx模块请求
│    │    ├── index.js                  api请求主入口文件【不可擅自修改】
│    │    ├── interceptors.js           请求拦截器【不可擅自修改】
│    │    ├── config.js                 配置请求相关参数
.

如何新增一个请求？

例：新增一个example的模块的getExampleList请求

第一步：新增一个名字为example的http模块下的名为：getExampleList 接口

在http -> modules下新增example.js

新增 getExampleList 接口

import axios from '../index' // 导入http中创建的axios实例
import { config } from '../config' // 导入http中创建的axios实例

export default {
  /**
   * 获取例子列表
   */
  export const getExampleList = (args) => {
    return axios({
	  url: `${config.api_url.djfansg}/api/activity-item/,  // 请求地址
	  data: args, // 请求参数
	  method: 'POST',  // 请求类型
	  showLoading: false, // 该请求是否需要全局loading
	  option: { // 额外参数
	    'name': 'll'
	  }
    })
  }
}

第二步：使用 getExampleList 方法

在vue的script中，调用getDepartmentList

import { getExampleList } from '@/src/http/example'; // 必须引入example，拿到example.js中的getExampleList接口。
let args = {
  param1: '',
  ...
}
getExampleList(args, res => {
 console.log(res)
})