vue中使用axios

Posted 2021-03-11 未月廿三

axios

基于http客户端的promise，面向浏览器和nodejs

特色

• 浏览器端发起XMLHttpRequests请求

• node端发起http请求

• 支持Promise API

• 监听请求和返回

• 转化请求和返回

• 取消请求

• 自动转化json数据

• 客户端支持抵御

安装

使用npm：

npm install axios --save

为了解决post默认使用的是application/json请求数据 ，导致请求参数无法传递到后台，所以还需要安装一个插件QS,此插件将application/json转换为application/x-www-from-urlencoded

npm install qs --save

一个命令全部解决

npm install --save axios vue-axios qs

使用

修改原型链

首先在 main.js 中引入 axios

import Axiso from ‘axiso‘

这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题

Vue.prototype.$axios= Axios

配置好了之后就可以全局使用了

post请求转换

import QS from ‘qs‘

if(config.method==‘post‘){
config.data=QS.stringify(config.data);//防止post请求参数无法传到后台
}

实例使用:

axios({
    method: 'post',
    url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
  })
  .then((response)=>{
      console.log(response.data)
  })
  .catch((error)=>{
      console.log(error)
  })
  
  axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
      miaov:"课堂"  //发送的数据
    })
      .then((response)=>{
        console.log(response.data)
      })
      .catch((error)=>{
        console.log(error)
      })

发送带参数的

//get方式发送数据
axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    params: {
        pomelo: 'tt',
        test: 'test'
    }
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})
//post方式发送数据
axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
    pomelo: 'tt',
    test: 'test'
}).then((response) => {
    console.log(response)
}).catch((error) => {
    console.log(error)
})