vue引入axios发送get或post请求的方法

版权声明：转载请注明出处，谢谢！ 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

用起来感觉挺方便的，哈哈