The method of introducing axios vue get or post transmission request

Copyright: please indicate the source, thank you! https://blog.csdn.net/dreamstone_xiaoqw/article/details/90453427

Mentioned get / post interaction request, saying small series like virgin ajax js package when not in the frame. But now, since we use the vue you have to try axios taste.

Configured to use during several reported axios wrong, so here the error log and posted a process.

Error, alarm analysis

（1）‘axios’ is not defined

Error message:

✘  http://eslint.org/docs/rules/no-undef  'axios' is not defined
src\components\question.vue:100:7
    axios.get('/user', {
    ^

the reason:

** axios not properly introduced **

（2）Cannot read property ‘get’ of undefined

Error message:

vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"

For the same reason.

（3）Provisional headers are shown

Alarm information:

Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
Referer: http://localhost:8080/

The reason:
. A request server API does not support cross-domain
b browser blocks.

This warning, though still small series of tips after the API supports cross-domain request but did not affect the normal transmission of data, it is negligible.

Throughout the above, we can see how to properly introduced axios is the key problem.

axios introduced

Document official website

Document official website address: http://www.axios-js.com/zh-cn/docs/vue-axios.html

Proceed as follows:

(1) Installation extension package

npm install --save axios vue-axios

(2) introducing Code

vue init webpack way the default configuration file to build the project to modify the entrance main.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

(3) Usage Example

this.axios.get(api).then((response) => {
  console.log(response.data)
})

Examples

Small series to be useful in the development process, desensitization code posted by reference herein:

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

I feel very convenient, ha ha