chaihongjun.me

axios封装和应用(version2)

  1. 提前安装element(因为前端使用到了)

npm i element-ui -S
npm install babel-plugin-component -D
  1. 配置babel.config.js

module.exports = {
 presets: ["@vue/cli-plugin-babel/preset"],
 "plugins": [
   [
     "component",
     {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-chalk"
     }
   ]
 ]
};
  1. 封装文件

// @/src/request/axios.js
import axios from 'axios'
import qs from 'qs'
import router from '@/router'//路由文件
import { Message } from 'element-ui'
let api_base_url = ''
if (process.env.NODE_ENV === 'development') {
 api_base_url = 'http://api.hzwlb.org'
} else if (process.env.NODE_ENV === 'production') {
 api_base_url = 'http://api.hzwlb.org'
}
let instance = axios.create({
 timeout: 1000 * 60,
 baseURL: api_base_url
})
instance.defaults.responseType = 'json'
instance.defaults.withCredentials = true
instance.defaults.transformRequest = [
 data => {
   return qs.stringify(data)
 }
]
instance.defaults.validateStatus = function () {
 // return status >= 200 && status < 400; // 200- 399  resolve  其他状态码 reject
 // 如果在响应拦截设置了状态码判断,这里设置返回 true
 return true
}
// 请求拦截器
instance.interceptors.request.use(
 config => {
//{url: "/slides", method: "get", headers: {…}, baseURL: "http://api.hzwlb.org", transformRequest: Array(1), responseType: "json",…}
   return config
 },
 error => {
   Message.error({ message: '请求超时!' })
   return Promise.reject(error)
 }
)
// 响应拦截器即异常处理
// 服务器 Response 对象
instance.interceptors.response.use(
 response => {
   // {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request:{…}}
   let data = response.data     //响应的数据部分
   let status = response.status  //标准状态码
   if (status === 200) {  //如果响应正常则放行 数据
     return Promise.resolve(data) //  *响应拦截器,只取数据部分*
   } else if (status === 204) {
     Message.success({ message: '空的啊!' })
     return Promise.resolve(data)
   }
   else if (status === 301) {
     Message.info({ message: '请先登录!' })
     router.replace({
       path: '/login',
       name: "Login"
     })
     return
   }
   else if (status === 400) {
     Message.error({ message: '客户端请求错误!' })
     return
   }
   else if (status === 401) {
     Message.error({ message: '请配置验证信息!' })
     return
   }
   else if (status === 403) {
     Message.error({ message: '服务器禁止访问资源!' })
     return
   }
   else if (status === 404) {
     Message.error({ message: '资源未找到!' })
     return
   }
   else if (status === 500) {
     Message.warning({ message: '服务器出错了!' })
     return
   }
   else if (status === 503) {
     Message.warning({ message: '服务器正在维护中!' })
     return
   }
   else {
     //其他错误
     Message.error({ message: response.statusText })
     return Promise.reject(response)
   }
 },
 error => {
   console.log('响应错误信息:')
   console.log(error)
 }
)
let api = {}
api.get = function (url) {
 return new Promise((resolve, reject) => {
   instance
     .get(url)
     .then(response => {
       resolve(response)
     })
     .catch(error => {
       reject(error)
     })
 })
}
/**
* @name: post 方式提交
* @param {*} url 接口地址
* @param {Object} data
* @return {response}
*/
api.post = function (url, data) {
 return new Promise((resolve, reject) => {
   instance
     .post(url, data)
     .then(response => {
       resolve(response)
     })
     .catch(error => {
       reject(error)
     })
 })
}
export default api
  1. 接口集中

// @/src/request/index.js
import api from "./axios.js"

//demo
export const getBanner = (id, limit, offset) => api.get('/lists?categoryID=' + id + '&limit=' + limit + '&offset=' + offset)
  1. 组件内使用

<script>
// 1.引入接口  
import { getBanner } from "@/request/index.js";
export default {
 name: "Login",
 data() {
   return {};
 },
 methods: {
// 2.声明一个异步方法,该方法内调用接口    
   async getBanner(id, limit, offset) {
     let res = await getBanner(id, limit, offset);
     console.log("res");
     // 返回的是后台提供的响应对象,已经剔除了杂项
     // {code: 200, data: Array(...), count: 0, msg: "OK"}  
     console.log(res);
   },
 },
 mounted() {
    // 3. 调用异步方法并传接口参数
   this.getBanner(5, 2, 0);
 },
};
</script>

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:chaihongjun»