Axios封装post和get请求

import axios from 'axios';
//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((error) => {
               reject(error)
            })
    })
}
////返回一个Promise(发送get请求)
export function fetchGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response.data)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}

将上述代码放入一个PublicApi.js文件中,然后在main.js中导入

import {fetchPost,fetchGet} from "PublicApi"

Vue.prototype.$fetchPost= fetchPost;

Vue.prototype.$fetchGet= fetchGet;

这样就可以在全局使用了,然后在这里分享一下,有的人会问axios不是异步的吗,为什么外层还要加个new Promise,

一开始我看着也没有反应过来,后来看懂了,所以说一下。

因为new Promise声明的是异步函数,而且是为了ajax请求嵌套严重,而更加规范的一种书写方式

这里将Promise作为返回值给我们的公用函数

当我们在组件中使用的时候,就可以避免请求B需要请求A数据做请求时,重新声明Promise,

而可以直接这样写

fetchGet(url, param).then(res=>{
}).catch(err=>{
})
或者如果没有用到这种情况的话,也很方便,可以直接声明变量接收
let Info = fetchGet(url, param);

 

 

 

 

你可能感兴趣的:(Vue)