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

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

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

展开阅读全文

没有更多推荐了,返回首页