【小白成长之路】实战vue2.0+axios 接口封装

目录层级关系

首先需要建立一个文件夹api

src/api

接着在这个文件里建立三个js文件

api

|-apiMovie.js  //接口统一管理文件

|-request.js // 接口处理文件

|-index.js //

把下面这些东西直接复制到相应的文件里面

request.js

import axios from 'axios' // 引入axios

export function request (options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({ // instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
      // 所有的请求都会带上这些配置，比如全局都要用的身份信息等。
      headers: {
        'Content-Type': 'application/json'
        // 'token_in_header': global_.token,//token从全局变量那里传过来
      },
      timeout: 30 * 1000 // 30秒超时
    })
    instance(options)
      .then(res => { // then 请求成功之后进行什么操作
        resolve(res) // 把请求到的数据发到引用请求的地方
      })
      .catch(err => {
        console.log('请求异常信息：' + err)
        reject(err)
      })
  })
}

index.js

export default {
  Hallowmas: '/api'
  // 接口代理配置
}

// 也可以像下面这样，区分环境或者区分服务器等等
// let service = 'dev';
// // let service = 'prod';
// let api = '';
// if (service === 'dev') {
//   /**dev开发**/
//   api = '/stomatology/patient';
// } else if (service === 'prod') {
//   /**prod部署**/
//   api = '/proxy/client';
// }
//
// export default {
//   /**个人中心start**/
//   //1 获取c端个人信息 POST /wx/getClientInfo
//   getClientInfo: `${api}/wx/getClientInfo`,
//   //2 获取手机注册验证码 POST /wx/getClientRegisterCode
//   getClientRegisterCode: `${api}/wx/getClientRegisterCode`,
//   //3 绑定手机号 POST /wx/clientBindMobile
//   clientBindMobile: `${api}/wx/clientBindMobile`,
//   /**个人中心end**/
//
// }

apiMovie.js

import { request } from './request' // 引用fetch.js
import api from './index' // 引用url.js
const baseUrl = api.Hallowmas

// 获取电影列表
export function getMovieList (params) {
  return request({
    // apiMovie.Hallowmas apiMovie.js里面的数据
    url: baseUrl + 'v2/movie/top250',
    method: 'post', // 请求方法
    params: params
  })
}

组件里面的调用

import { getMovieList } from '@/api/apiMovie'

    getMovieList(params).then(res => {
        console.log(res)
        console.log('i am in getMovieList')
      })

成功

这个接口实在做的太烦了，参考别人的博客，做了很久，很心累，有时间慢慢完善详细步骤，现在我要享受统一接口带来的快感了，嘻嘻嘻嘻

原博客：https://blog.csdn.net/OBKoro1/article/details/78450040