api请求模块化,让你的接口变得更加优雅

1、新建一个js写入( 假设文件名叫demo.js

import http from '../assets/http'
export function demo (data) {
  return http({
    method: 'post',
    url: 'api/api/admin/loockinfoApply',
    data
  })
}

2、去单页面那进行引入

import {demo} from './demo.js'
export default {
  name: 'App',
  async created () {
    console.log(await demo({id: 1}))
  }
}

之后的请求就可以照葫芦画瓢

export function demo (data) {
  return http({
    method: 'post',
    url: 'api/api/admin/loockinfoApply1',
    data
  })
}

export function demo1 (data) {
  return http({
    method: 'post',
    url: 'api/api/admin/loockinfoApply2',
    data
  })
}

export function demo2 (data) {
  return http({
    method: 'post',
    url: 'api/api/admin/loockinfoApply3',
    data
  })
}
import {demo, demo1, demo2} from './demo.js'
export default {
  name: 'App',
  async created () {
    console.log(await demo({id: 1}))
    console.log(await demo1({id: 1}))
    console.log(await demo2({id: 1}))
  }
}

http.js

import axios from 'axios'
import Cookies from 'js-cookie'
const http = options => {
  return new Promise((resolve, reject) => {
    const defaultOptions = {}
    const newOptions = {
      ...defaultOptions,
      ...options
    }
    newOptions.headers = {
      'content-Type': 'application/json;charset=UTF-8',
      'token': Cookies.get('zhelicooke'),
      ...newOptions.headers
    }
    // console.log(newOptions);
    axios({
      method: newOptions.method,
      url: newOptions.url,
      data: newOptions.data,
      headers: newOptions.headers
    }).then(res => {
      if (res.status === 200) {
        resolve(res.data)
      } else {
        reject(res)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

export default http
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,337评论 0 3
  • iOS网络架构讨论梳理整理中。。。 其实如果没有APIManager这一层是没法使用delegate的,毕竟多个单...
    yhtang阅读 5,257评论 1 23
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,609评论 0 7
  • 学习目标:第一个100天 《中高级口译口试备考精要》每天口译一套试卷(到考试前过两遍) 用时: 2小时左右 内容:...
    辫儿妈阅读 328评论 0 0
  • 【小技巧】准备一个岗位的面试通常包括以下几个步骤:☛ 对岗位进行调研☛ 分析自己的能力和经验状况,与岗位要求进行匹...
    Marks阅读 285评论 0 0