Axions异步通信

最新推荐文章于 2023-06-29 09:41:16 发布

Code good g

最新推荐文章于 2023-06-29 09:41:16 发布

阅读量512

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/lesliesuai/article/details/117413458

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Axios异步通信(通信框架

Axios是一个开源的可以用在**浏览器端和NodeJS 的异步通信框架**，她的主要作用就是实现AJAX异步通信，其功能特点如下:

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF (跨站请求伪造)
GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

为什么要使用Axios 【读音：xo】

由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!

代码初探axios

先建立一个data.json

{
  "name": "cqh",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "缇香郡",
    "city": "宁波",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}

demo07.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AXios异步通信</title>

    <!--在线CDN-->
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--2.导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<body>

<div id="app">

    <!--3.第三步，前端调用中间件，然后输出相关的数据    -->
    <div>{{ info.name }}</div>
    <!--    <span>{{info.}}</span>-->

    <a v-bind:href="info.url">点我到百度链接</a>
    <br>
    <div>{{ info.title1 }}</div>
    <ul>
        <li v-for="link in info.links"> 名称：{{ link.name }}
            <a v-bind:href="link.url">跳转地址</a>
        </li>
    </ul>
    <p>输出json里面存的对象</p>
    <p>名字：{{ info.address.street }}</p>
    <p>城市：{{ info.address.city }}</p>
    <p>地点：{{ info.address.country }}</p>

</div>

<script>
    let vm = new Vue({
        el: "#app",
        //和data: 不同 属性：vm   这是属性
        // data: {},

        //这是方法data()
        // 2.第二步，把后台的数据放进中间件vm里面，然后再通过前端调用再传值
        data() {
            //返回值
            return {
                info: {
                    //下面的这些都可以不用进行配置
                    // name: null,
                    // url: null,
                    // title1: null,
                    // address: {
                    //     street: null, city: null, country: null,
                    // },
                    // links: [
                    //     {name: null, url: null,}
                    // ]
                },

            }
        },

        mounted() {
            //钩子函数 链式编程 ES6新特性  已安装

            // 1.第一步，获取后台数据，这里是使用json来存值
            // 也就是获得json里面的数据,然后想办法渲染到前端就ok了
            axios.get("data.json").then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

测试结果：

补充：

什么是axios?

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

Axios特性

1、可以在浏览器中发送 XMLHttpRequests

2、可以在 node.js 发送 http 请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求数据和响应数据

6、能够取消请求

7、自动转换 JSON 数据

8、客户端支持保护安全免受 XSRF 攻击

基本使用

npm install axios --save

常见的配置

请求地址： url: '/user'
请求类型： method: 'get'
根路径： baseUrl: 'http://localhost:8080'
请求前的数据处理： transformRequest: [function(data){}]
请求后的数据处理： transformResponse: [function(data){}]
自定义请求头： headers: {'x-Requested-With': 'XMLHttpRequest'}
URL查询对象： params: {id: 12}
查询对象序列化函数： paramsSerializer: fucntion(params){}
request body: data:{key: 'aa'}
超时设置： timeout: 10000
跨域是否带token: withCredentials: false
自定义请求处理： adapter: function(resolve, reject, config){}
身份验证信息：auth: {uname: '', pwd: '1243'}
响应的数据格式： responseType: 'json/blob/document/arraybuffer/text/stream'

封装 axios

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  })
  // 发送真正的网络请求      axios本身返回Promise 因此可以在外部 .then .catch
  return instance(config)
}

只要调用reques（config）然后传进来一个地址，就可以进行配置了

请求拦截

axios.interceptors //这样是拦截全局的

import axios from 'axios'

// 最终版本
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  })

  // 2.axios的拦截器

  // 2.1 请求拦截的作用
  instance.interceptors.request.use(config => {
    console.log(config);
    // 1.比如config中的一些信息不符合服务器要求

    // 2.比如发送网络请求时，都希望在界面中显示一个请求的图标
    
    // 3.某些网络请求(登录(token)),必须携带一些特殊的信息
    
    // 拦截下来了 记得给返回出去
    return config

  }, err => {
    console.log(err);
  });

  // 3.发送真正的网络请求 axios本身返回Promise
  return instance(config)

响应拦截

import axios from 'axios'

// 最终版本
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  })

  // 2.2 响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求 axios本身返回Promise
  return instance(config)

}

Code good g

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axions异步通信

目录Axios异步通信(通信框架为什么要使用Axios 【读音：xo】代码初探axios先建立一个data.jsondemo07.html测试结果：Axios异步通信(通信框架Axios是一个开源的可以用在**浏览器端和NodeJS 的异步通信框架**，她的主要作用就是实现AJAX异步通信，其功能特点如下:从浏览器中创建XMLHttpRequests从node.js创建http请求支持Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据
复制链接

扫一扫