版权声明:转载请注明出处,谢谢! https://blog.csdn.net/dreamstone_xiaoqw/article/details/90453427
提到get/post请求交互,话说小编在不用框架时喜欢用原生js封装ajax。但如今既然用了vue就得尝尝axios的味道。
配置使用axios期间报了几次错,所以在这里将错误及过程日志贴一贴。
报错、告警 分析
(1)‘axios’ is not defined
错误信息:
✘ http://eslint.org/docs/rules/no-undef 'axios' is not defined
src\components\question.vue:100:7
axios.get('/user', {
^
原因:
** axios没有正确引入 **
(2)Cannot read property ‘get’ of undefined
错误信息:
vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"
原因同上。
(3)Provisional headers are shown
告警信息:
Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
Referer: http://localhost:8080/
原因:
a. 请求的服务端API不支持跨域
b. 浏览器拦截
此告警,小编在API支持跨域后虽然依旧提示,但并没有影响请求数据的正常传输,所以忽略不计。
纵观上述内容,可知如何正确引入axios是问题的关键。
axios引入
官网文档
官网文档地址:http://www.axios-js.com/zh-cn/docs/vue-axios.html
步骤如下:
(1) 安装扩展包
npm install --save axios vue-axios
(2)代码引入
vue init webpack 方式默认配置构建的工程修改入口文件 main.js
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
(3)用法示例
this.axios.get(api).then((response) => {
console.log(response.data)
})
实例
小编在开发过程中有用到,将代码去敏贴在这里供参考:
doSomeThing: function () {
var api = 'http://www.yixzm.cn/tools/api/get_region_by_ip?ip=101.224.127.236'
this.axios.get(api).then((response) => {
console.log(response.data)
}).catch(function (error) {
console.log(error)
})
},
End
用起来感觉挺方便的,哈哈