您的位置: 首页  >  IT文章  >  vue全家桶（3.1） 4.数据请求

vue全家桶（3.1） 4.数据请求

分类: IT文章 • 2022-08-31 20:35:42

4.1.axios是什么？

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
在vue全家桶中，推荐使用，说白了就是用它来发送请求，和后端交互

4.2.简单使用

1.安装axios

npm install axios --save

2.使用axios发送get请求

在组件内部导入axios，这里以Demo1.vue为例：

import axios from 'axios'

在created中发送请求

  created () {
    axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
      .then((response) => console.log(response))
  }

完整代码：

<template>
  <div class="page">
  </div>
</template>

<script type="text/javascript">
import axios from 'axios'
export default {
  data () {
    return {

    }
  },
  components: {

  },
  created () {
    axios({
      method: 'get',
      url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list'
    })
      .then((response) => console.log(response))
  }
}
</script>

<style scoped>
</style>

上面代码中打印出来的内容是一个对象，里面的内容结构为：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

知识补充：在代码中使用到的后端地址是使用一个在线mock数据生成工具伪造的，具体工具如下

easy-mock地址: https://easy-mock.com
mockjs文档： https://github.com/nuysoft/Mock/wiki
mockjs案例： http://mockjs.com/examples.html
easy-mock的简单使用教程： http://blog.nodeing.com/archives/87.html

上面例子中使用get方式请求数据，其中get方式是默认的，因此，你也可以写成这样

axios('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
    .then((response) => console.log(response))

3.使用axios发送post请求

接下来，你可以尝试着去发送一下post方法了，使用方法和jquery中ajax方法类似

axios({
      method: 'post',
      url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add'
    })
      .then((response) => console.log(response))

4.错误处理

你需要在catch里面处理错误，例如：

 axios({
      method: 'post',
      url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add/1'
    })
      .then((response) => console.log(response))
      .catch((err) => console.log(err))

5.传递参数方式

get请求方式传参数，配置params选项就可以了

  axios({
    method: 'get',
    url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list',
    params: {
      title: 'xxx',
      count: 30
    }
  })
    .then((response) => console.log(response))

注意：params里面的内容作为查询字符串和url一起发送

post请求方式传参数，配置data选项

  axios({
    method: 'post',
    url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add',
    data: {
      title: 'html最佳入门',
      count: 80
    }
  })
    .then((response) => console.log(response))
    .catch((err) => console.log(err))

注意：data的内容作为请求体发送

4.3.请求方法的别名

为方便起见，为所有支持的请求方法提供了别名

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

举个例子，原来使用axios发送get请求我们写成这样

  axios({
    method: 'get',
    url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list',
    params: {
      id: 10
    }
  })
    .then((response) => console.log(response))

使用对应的别名发送，你可以写成这样

  axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list', {
    params: {
      id: 10
    }
  })
    .then((response) => console.log(response))

其他请求方式使用方法和上面例子类似

4.4.处理并发请求

有时候，你想一次执行多个请求，可以使用all方法

function http1 () {
  return axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
}
function http2 () {
  return axios.post('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/update')
}
axios.all([http1(), http2()]).then((response) => {
  // 这里response返回一个数组  里面装了两个请求的返回结果
  console.log(response)
})

上面代码中返回结果被放入到了一个数组中，如果想分别把结果拿出来，可以使用axios.spread方法

axios.all([http1(), http2()]).then(axios.spread((res1, res2) => {
  // res1 对应http1的请求结果 res2对应http2的请求结果
  console.log(res1, res2)
}))

螺钉课堂视频课程地址：http://edu.nodeing.com

相关推荐