vue 中使用axios + promise封装请求api ——方案（一），小白可以直接拿走复用

中文文档地址 https://www.kancloud.cn/yunye/axios/234845

我们在项目搭建好之后，需要请求api获取数据，那么最好的的方法就是用axios，那么axios怎么优雅的使用呢？请继续阅读。

1、安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果项目中已经安装了axios，那么可以忽略第1步

2、封装

项目文件配置路径

1、在config文件中配置基础url

// config.js文件内容
let config = {
   apiSite: 'ace.she.dev2.zanservice.com/api' 
  }
const http = process.env.NODE_ENV === 'development' ? 'http' : 'https'
// const http = 'http'/ 'https' 确定是http 或者 https
export const apiRoot = `${http}://${config.apiSite}`  
export const zanTokenHeaderName = 'X-Ca-ZanToken'
// 以上配置可以继续增加

2、在utils.js 文件配置了错误提示

import { Notification } from 'element-ui'

// 这里引用了element-ui 组件中的提示组件，如不需要可自行写样式。
export function prompt (message) {
  Notification.error({
    message,
    duration: 0
  })
}

3、HttpStatus.js配置

const HttpStatus = {
  noPermission: {
    code: 401,
    message: '您无此功能访问权限！'
  },
  tokenExpired: {
    code: 402,
    message: 'Token 已过期，您需要重新登录！'
  }
}
export { HttpStatus }

4、在httplib.js文件中进行封装

import axios from 'axios/index' // 导入axios
import { apiRoot } from 'config' //导入config文件
import { prompt } from 'utils'
import { HttpStatus } from 'httpStatus'

axios.defaults.baseURL = apiRoot // 设置基础url
axios.defaults.timeout = 30000  // 请求超时时间设置
axios.defaults.headers['Content-Type'] = 'application/json'

// 添加响应拦截器, 需要可添加，不需要可以不看这里，
axios.interceptors.response.use(function (response) {
 // 对响应数据做点什么（意思就是获取到的数据，需要做什么处理）
  return response
}, function (error) {
  // 对响应错误做点什么
  console.log('from interceptor: ' + error)
  if (error && error.response) {
    switch (error.response.status) {
      case HttpStatus.noPermission.code:
        prompt(HttpStatus.noPermission.message)
        break
      default:
        break
    }
  }
  return Promise.reject(error)
})

// 重点内容
const HttpLib = {
  get: async function (url, params = null) {
    try {
      let res = await axios.get(url, {
        params,
      })
      return res.data // 返回内容，根据后台返回数据 自行调整
    } catch (error) {
      console.log(error.message)
    }
  },
  post: async function (url, data = {}) {
    try {
      let res = await axios.post(url, data)

      return res.data
    } catch (error) {
      console.log(error.message)
    }
  },
  delete: async function (url, params) {
    try {
      let res = await axios.delete(url, {params})

      return res.data
    } catch (error) {
      console.log(error.message)
    }
  }
}

export { HttpLib }

到这里axios就封装好了，下面让我们去应用

5、api_routes.js中配置不同api的url

// 例如某api完整路径是http://ace.she.dev2.zanservice.com/api/api/v2/auth/login
// 我们在config文件中已经配置了基础url 也就是 http://ace.she.dev2.zanservice.com/api
// url还剩余 /api/v2/auth/login 部分
// 基础url解释，就是所有api url中共同的部分
let auth = {
	login: () => `api/v2/auth/login`,
}
let ApiRoutes = {
 auth: auth,
}
export { ApiRoutes }

6、passport_api.js

import { HttpLib } from 'httplib'
import { ApiRoutes } from 'api_routes'

export default {
  // 登录
  async login (params) {
    let data = await HttpLib.post(ApiRoutes.auth.login(), params)
    return data
  },
}

7、vue组件中调用passport_api.js中方法

<template>	
	<div>
		<el-button type="primary"  size="medium" @click="confirmLogin()"> 登录 </el-button>
	</div>
</template>
import api from 'passport_api'
export default {
  name: 'login',
  methods: {
  async confirmLogin(){
	 let postParams = {
	 	// 这里是参数
	 }
  	let data = await api.login(postParams )
  	// data 是返回的数据
  }
}

到这里 我们就可以用了，如有疑问可以留言。