vue2 axios2次封装

炀炀想吃鱼

已于 2023-09-06 20:20:12 修改

阅读量136

点赞数

文章标签：前端 vue.js npm

于 2023-09-06 19:59:31 首次发布

本文链接：https://blog.csdn.net/LYY_1017/article/details/132722428

版权

文章介绍了如何通过npm安装axios库，设置基础URL和超时时间，实现axios的全局配置和响应拦截。接着，文章展示了如何在Vue中使用axios封装GET和POST请求，并在`http.js`中二次封装API接口。最后，示例了在Vue组件中调用这些封装的接口方法。

摘要由CSDN通过智能技术生成

第一步安装：npm install --save axios
第二步：创建一个api.js 文件


import axios from "axios";
 
axios.defaults.baseURL = "https://zzgoodqc.cn"; //全局配置ip地址 写个这别的就不要在写了
 
axios.defaults.timeout = 30000;//超过30s报错
 
//添加响应拦截器
axios.interceptors.response.use(function (response) {
    //可以写if判断，提前拦截错误信息
    return response;
}, function (err) {
    return Promise.reject(err);
});
 
//post封装
export function apiPost(url, params){
    return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url:url,
                data:params
            }).then(res => {
                resolve(res.data);
            }).catch(err =>{reject(err.data)})
        });
    }
//get 封装
export function apiGet(url, params){ 
    return new Promise((resolve, reject) =>{ 
        axios.get(url, { 
            params: params,
            headers:{"token":sessionStorage.getItem('token')}
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data) 
        }) 
   });

第三步，在main.js 中声明原型使用他


import {apiGet,apiPost} from './api/https'
Vue.prototype.$apiGet  = apiGet
Vue.prototype.$apiPost = apiPost

第四步，在页面中使用

分别是

this.$apiGet

this.$apiPost

二次封装

再api里面创建一个http.js文件

import { apiGet } from "./api";
 
export function getList() {
  return new Promise((resolve, reject) => {
    apiGet("/index.php/index/index/getcode")
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
}

使用参数

import { getList } from '../api/http'
export default {
  data() {
    return {
 
    }
  },
  async created() {
    let res = await getList()
    console.log(res, 8888);
  }
}