axios数据交互

目录

一、axios 概念

二、官方文档

三、下载命令

四、特点

五、基本语法

六、基本案例

---

 

一、axios 概念

axios 是基于promise创建的http库，可以用于客户端（浏览器）和 node.js
​
官方概念：
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

二、官方文档

http://www.axios-js.com/
​
看云：https://www.kancloud.cn/yunye/axios/234845

三、下载命令

npm i axios@0
​
axios@0.27.2

四、特点

• 支持从浏览器中创建 XMLHttpRequests 和 node.js 创建 http 请求

• 支持 Promise API 拦截请求和响应(特有的方法)

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF （跨站请求伪造）

跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

五、基本语法

引入axios库文件，它会暴露一个axios()方法，这个方法下面还有axios.get()和axios.post()两个方法

5.1 axios({})

类似于$.ajax()，可以发起get或post请求，返回promise对象

axios({
    url:'你要请求的接口地址',
    method:'get/post', // 默认get
    // get传参
    params:{
        // 你要传入的get方式请求的入参
    },
    // post传参
    data:{
        // 你要传入的post方式请求的入参
    }
})
.then((res)=>{
    // 成功时候的响应res，axios有一个特点，返回的数据包含很多的配置信息
    // http状态码是200或者304，执行成功的逻辑（我们关心的是后端返回的res.code）
})
.catch((err)=>{
    // 错误时候的响应err
    // http状态码非200或者304，执行错误的逻辑
});

5.2 axios.get(url, {})

类似于$.get()，发起get请求，注意传参比较特别

axios.get('你要请求的接口地址',{
    params:{
        // 你要传入的get方式请求的入参，如：
        a:1,
        b:2
    }
})
.then((res)=>{
    // 成功时候的响应res，axios有一个特点，返回的数据包含很多的配置信息
    // http状态码是200或者304，执行成功的逻辑
})
.catch((err)=>{
    // 错误时候的响应err
    // http状态码非200或者304，执行错误的逻辑
})

5.3 axios.post(url, {})

类似于$.post()，发起post请求

axios.post('你要请求的接口地址',{
    // 你要传入的post方式请求的入参，如：
    a:1,
    b:2
})
.then((res)=>{
    // 成功时候的响应res，axios有一个特点，返回的数据包含很多的配置信息
    // http状态码是200或者304，执行成功的逻辑
})
.catch((err)=>{
    // 错误时候的响应err
    // http状态码非200或者304，执行错误的逻辑
})

返回的数据如下

除了data是真正的后端返回的，其它的都是axios配置的

 

六、基本案例

使用此网站的数据：JSONPlaceholder - Free Fake REST API

单起一个项目，创建pages-->axiosDemo.vue来测试，配置/axios路由

方法：

1、创建组件

2、设置路由

3、设置路由出口

1、局部调用axios

<template>
  <div>
    <h1>axios</h1>
    <ul>
      <li v-for="item in newList" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
​
<script>
import axios from "axios"; // 引入axios
export default {
  data() {
    return {
      newList: [],
    };
  },
​
  // 挂载完成时调用axios
  mounted() {
    // 类似于$.ajax();
    // axios({
    //   url: "http://jsonplaceholder.typicode.com/posts",
    // })
    //   .then((res) => {
    //     console.log(res.data); // 真实的数据在data中
    //     this.newList = res.data;
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
​
    // 类似于$.get()
    axios
      .get("http://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        // console.log(res.data); // 真实的数据在data中
        this.newList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

2、全局调用axios

main.js

// 引入axios，并挂载到vue的原型上
import axios from 'axios';
Vue.prototype.$axios = axios;

组件中

<template>
  <div>
    <h1>axios</h1>
    <ul>
      <li v-for="item in newList" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      newList: [],
    };
  },
​
  // 挂载完成时调用vue实例上的 axios
  mounted() {
    // 类似于$.ajax();
    this.$axios({
      url: "http://jsonplaceholder.typicode.com/posts",
    })
      .then((res) => {
        console.log(res.data);
        this.newList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
​
    // 类似于$.get()
    // this.$axios
    //   .get("http://jsonplaceholder.typicode.com/posts")
    //   .then((res) => {
    //     // console.log(res.data);
    //     this.newList = res.data;
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
};
</script>