axios封装、二次封装

一次封装

第一步安装：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, 123);
  }
}