vue：axios二次封装，接口统一存放

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

https://www.jianshu.com/p/9077baa9d543

一、基于框架：vue
二、基于http库：axios
三、基本用法：

    1.通过node安装：

npm install axios

    2. 在项目目录的src文件夹下新建providers文件夹，在该文件夹内新建http-service.js文件，内容如下代码块：

import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://www.baidu.com'; //填写域名
//http request 拦截器
axios.interceptors.request.use(
  config => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);
//响应拦截器即异常处理
axios.interceptors.response.use(response => {
    return response
}, err => {
    if (err && err.response) {
      switch (err.response.status) {
        case 400:
            console.log('错误请求')
          break;
        case 401:
            console.log('未授权，请重新登录')
          break;
        case 403:
          console.log('拒绝访问')
          break;
        case 404:
          console.log('请求错误,未找到该资源')
          break;
        case 405:
          console.log('请求方法未允许')
          break;
        case 408:
          console.log('请求超时')
          break;
        case 500:
          console.log('服务器端出错')
          break;
        case 501:
          console.log('网络未实现')
          break;
        case 502:
          console.log('网络错误')
          break;
        case 503:
          console.log('服务不可用')
          break;
        case 504:
          console.log('网络超时')
          break;
        case 505:
          console.log('http版本不支持该请求')
          break;
        default:
          console.log(`连接错误${err.response.status}`)
      }
    } else {
      console.log('连接到服务器失败')
    }
    return Promise.resolve(err.response)
})
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }
 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}
 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}
/**
* 下面是获取数据的接口
*/
/** 
* 测试接口
* 名称：exam
* 参数：paramObj/null
* 方式：fetch/post/patch/put
*/
export const server = {
    exam: function(paramObj){
        return post('/api.php?ac=v2_djList',paramObj);
    }
}

    3.在main.js内引用以上的http-service.js文件：

import {server} from './providers/http-service'
//定义全局变量
Vue.prototype.$server=server;

四、测试用例

export default {
  methods:{  
    exam: function(){
      let paramObj = {
        uid: '123456'
      }
      this.$server.exam(paramObj).then(data => {
        console.log(data)
      })
    }
  }
}

在网友们写的封装方法基础上做了一些修改，目前在自己的项目组件化中使用，有写的不对的地方欢迎大家留言指出~



作者：Lucia_Huang
链接：https://www.jianshu.com/p/9077baa9d543
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

以上是 vue：axios二次封装，接口统一存放 的全部内容， 来源链接： utcz.com/z/376590.html

回到顶部