1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- import axios from 'axios'
- import qs from 'qs'
- // 在config.js文件中统一存放一些公共常量,方便之后维护
- import { baseURL } from './config.js'
- // 添加请求拦截器,在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
- axios.interceptors.request.use(function (config) {
- // 显示loading
- return config
- }, function (error) {
- // 请求错误时弹框提示,或做些其他事
- return Promise.reject(error)
- })
- // 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
- axios.interceptors.response.use(function (response) {
- // 对响应数据做点什么,允许在数据返回客户端前,修改响应的数据
- // 如果只需要返回体中数据,则如下,如果需要全部,则 return response 即可
- return response.data
- }, function (error) {
- // 对响应错误做点什么
- return Promise.reject(error)
- })
- // 封装数据返回失败提示函数---------------------------------------------------------------------------
- function errorState (response) {
- // 隐藏loading
- // 如果http状态码正常,则直接返回数据
- if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
- // 如果不需要除了data之外的数据,可以直接 return response.data
- return response
- } else {
- alert('数据获取错误')
- }
- }
- // 封装数据返回成功提示函数---------------------------------------------------------------------------
- function successState (res) {
- // 隐藏loading
- // 统一判断后端返回的错误码(错误码与后台协商而定)
- if (res.data.code === '000000') {
- alert('success')
- return res
- }
- }
- // 封装axios--------------------------------------------------------------------------------------
- function apiAxios (method, url, params) {
- let httpDefault = {
- method: method,
- baseURL: baseURL,
- url: url,
- // `params` 是即将与请求一起发送的 URL 参数
- // `data` 是作为请求主体被发送的数据
- params: method === 'GET' || method === 'DELETE' ? params : null,
- data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
- timeout: 10000
- }
- // 注意**Promise**使用(Promise首字母大写)
- return new Promise((resolve, reject) => {
- axios(httpDefault)
- // 此处的.then属于axios
- .then((res) => {
- successState(res)
- resolve(res)
- }).catch((response) => {
- errorState(response)
- reject(response)
- })
- })
- }
- // 输出函数getAxios、postAxios、putAxios、delectAxios,供其他文件调用-----------------------------
- // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。
- export default {
- install: function (Vue) {
- Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
- Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
- Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
- Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
- }
- }
|