Axions异步通信

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>

测试结果:

image-20210531113233241
补充:

什么是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)

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值