使用axios发送请求

axios简介

axios是一个基于 promise 的 HTTP 库,是vue作者推荐使用的HTTP库。优点:

  • 可以发送XMLHttpRequest请求
  • 可以在node中发送请求
  • 可以拦截和转换请求与响应

axios支持如下请求方式:

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

axios的使用

安装axios:

npm install axios

在组件中引入axios并发送get请求,下面代码会向url发送请求并携带参数id=1001,这里需要先把后台跑起来:

<script>
import axios from 'axios'

export default {
    created() {
      axios({
        url: 'http://localhost:8080/user',
        params:{
          //向后台传参数
          id: 1001
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    }
}
</script>

使用axios.get发送请求,注意url的位置变化:

<script>
import axios from 'axios'

export default {
    created() {
      axios.get('http://localhost:8080/user',{
        params:{
          //向后台传参数
          id: 1001
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    }
}
</script>

使用axios.post发送请求,数据写到data中,与params不同的地方是,data会将请求数据放在请求体中,params会将请求数据拼接在url中

export default {
    created() {
      axios({
        url: 'http://localhost:8080/user',
        method: 'post',
        data: {
          //向后台传参数
          id: 1001,
          username: 'jack'
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    }
}
</script>

使用axios.post发送请求

<script>

import axios from 'axios'

export default {
    created() {
      axios.post('http://localhost:8080/user', {
        data: {
          //向后台传参数
          id: 1001,
          username: 'jack'
        }
      }).then(res=>{
        console.log(res.data)
      }).catch(err=>{
        console.log(err)
      })
    }
}
</script>

抽取axios

想象一下,如果在每个组件中都使用axios访问后台,那么之前的代码要写很多遍,这样axios就显得比较重了。项目将来如果要用别的技术替换axios,这个工作量还是蛮大的。基于这个原因,我们通常会将axios写到一个文件中,别的组件在使用的时候可以引入。例如创建util文件夹,然后在里面创建api.js,之后在该文件中编写axios的操作。

axios通用配置

之前的代码中访问后台的url中ip地址和端口号是固定的,这些内容只需要定义一次即可,此时可以使用axios的通用配置来解决,在apis.js中添加下面内容

axios.defaults.baseURL = 'http://localhost:8080'

添加之后,在axios中的url只需填写访问的controller名即可。除此之外下面内容也可以在axios通用配置中设置,更多内存可以通过axios相关api查看:

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout = 3000;

创建axios实例

上面介绍了通用配置,配置好baseURL之后,我们就可以省略这部分的编写了,但是在一些分布式系统中,会有多个后台地址,例如:

订单查询:http://192.168.1.101:8080

商品查询:http://192.168.1.102:8080

这种情况下通过一个baseURL就不好使了,此时我们可以创建多个axios实例来解决,下面创建了两个axios对象。

const orderAxios = axios.create({
  baseURL: 'http://192.168.1.101:8080'
})

const productAxios = axios.create({
  baseURL: 'http://192.168.1.102:8080'
})

拦截器

axios提供了拦截器方便程序员在请求和响应做一些处理,使用方式如下,注意别忘了return:

//请求拦截器
axios.interceptors.request.use(
  config => {
      // 在发送请求之前可以做一些事情
      console.log('拦截request')
      return config
    },
    error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  )

响应拦截器:

//响应拦截器
axios.interceptors.response.use(
  response => {
      //响应时要做的事情
      console.log('拦截response')
      return response
    },
    error => {
      //对响应错误做些什么
      return Promise.reject(error);
    }
)

 

Category: vue