axios 的简单封装

  • 在src目录下新建request文件夹
  • request文件夹新建http.js
  • request文件夹新建api.js

下载

yarn add axios 

在http.js 中

import axios from 'axios'
import QS from 'qs'
import { Toast } from 'vant';
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://192.168.3.30:8010/';

// 请求拦截器
axios.interceptors.request.use(function(config) {
    // 所有请求之前都要执行的操作
        Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration:0
    });
    return config;
}, function(error) {
    // 错误处理

    return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(function(response) {
    // 所有请求完成后都要执行的操作
        Toast.clear()
    return response;
}, function(error) {
    // 错误处理
    return Promise.reject(error);
});

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    })
}

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

在api.js中

import {
    post
} from './http'
export const apiAddress = p => post('api/prizes/prizex', p);

export const prizez = p => post('api/prizes/prizez', p);

在需要使用的vue页面中

    import {
        apiAddress,prizez
    } from '@/request/api';

    created() {
            this.fectList()  
            this.getList() 
    
        },
        methods: {
            async getList(){
                let res =await prizez({
                    activityid: '1',
                })
                console.log(res);
            },
            async fectList() {
                                try{
                                        let res =await apiAddress({
                        activityid: '1',
                         })
                         console.log(res);
                                 }catch(e){
                                          console.log(e)
                                 }
                
            },
        }
//或者
getList(){
    prizez({
        activityid: '1',
        }).then(res => {
            console.log(res)
        })
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容