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);
版权声明:本文为qq_38948398原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。