关于axios的具体用法,网上有很详细的解释,我就不在这里赘述了。在此推荐一篇文章,我觉得他写的不错。
本文,主要是分享下自己做项目时遇到的一点坑。
项目中用vue-cli搭建了脚手架,然后安装了axios插件,安装方法:
npm install axios -s
项目中封装了很多的公用的函数,统一放置在common.js中,项目目录如下:
在main.js里引入common.js,并将其添加到Vue的原型链。
import * as common from './static/common'
Vue.prototype.common = common.default;
这时,我想在main.js中引入axios,
import axios from 'axios'
并在common.js中封装成通用的函数,结果遇到了问题,运行时始终提示axios为undefined。我猜想这可能与import的机制有关,因为也是最近才了解import这个用法,所以具体原因无法解释。此处@各路高人,希望不吝赐教。
后来我采用的变通方法是在common.js中引入axios,这样上述的问题就解决了。
接下来,遇到了另一个问题,关于promise,同样也是因为最近才尝试用promise,因此这个很简单的地方还是花了我很多的功夫去琢磨。
为了方便服用,将axios封装为一个自定义的函数,放置在common.js中。在此需要注意的是,axios函数执行后返回一个Promise对象,因此在封装函数的最后要将这个axios的运行结果返回,即return axios({}).
execServerCall =
(url, type, params, body) => {
return axios({
url:url,
method:type,
params:params,
data:body,
headers: {
}
});
}
可以进一步封装代码,将请求分别封装成get,post两个方法,方便调用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。