Vue网络请求-Axios

一个基于promise的网络请求库，作用域node.js和浏览器中，是同一套代码可以运行在浏览器和node.js中。在服务器使用原生node.js的http模块，而在客户端(浏览器端)则使用 XMLHttpRequests。// axios.post('/mock/users.json', {id: 1, name: 'aaa'})// post请求。//添加一个默认的域名配置。//设置额外的请求

努力的地球人

440人浏览 · 2022-11-20 16:10:54

努力的地球人 · 2022-11-20 16:10:54 发布

Vue网络请求-Axios

一个基于promise的网络请求库，作用域node.js和浏览器中，是同一套代码可以运行在浏览器和node.js中。在服务器使用原生node.js的http模块，而在客户端(浏览器端)则使用 XMLHttpRequests

特性

从浏览器创建XMLHttpRequests

从node.js创建http请求

支持Promise API

拦截请求和响应(类似于中间件)

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF [ 跨站请求攻击 ]
支持多种请求方式

axios(config)

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]])

尝试一下

发出一个简单的网络请求

./mock/users.json

[
  {
    "id": 1,
    "name": "西瓜"
  },
  {
    "id": 2,
    "name": "草莓"
  },
  {
    "id": 3,
    "name": "猕猴桃"
  }
]

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="item in users" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
    

    <!-- 引入配置文件，只是举例子简单用一下，在使用工程化后可以直接使用npm安装 -->
    <script src="./js/axios.js"></script>
    <script>

        // console.log(axios); // 就是一个函数

        const app = new Vue({
            el:'#app',
            data:{
                users:[]
            },
            created(){
                axios.get('./mock/users.json')  //发出网络请求
                .then(res=>this.users = res.data)   //获取数据
            }
        })

    </script>


</body>
</html>

效果

在这里插入图片描述

===

默认配置：

==》如果给sxios添加了默认哦欸之，则他在请求时回自动添加

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="item in users" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
    

    <!-- 引入配置文件，只是举例子简单用一下，在使用工程化后可以直接使用npm安装 -->
    <script src="./js/axios.js"></script>
    <script>

        // console.log(axios); // 就是一个函数

        //添加一个默认的域名配置
        axios.defaults.baseURL = 'http://127.0.0.1:5500/04_%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F_%E7%BD%91%E7%BB%9C_%E7%BB%84%E4%BB%B6';
        //设置超时时长
        axios.defaults.timeout = 10000
        //设置额外的请求头信息
        axios.defaults.headers.token = 'fewkfjeklfewjlfjl;fewjl;fejfejfew'

        const app = new Vue({
            el:'#app',
            data:{
                users:[]
            },
            created(){
                axios.get('/mock/users.json')  //发出网络请求
                .then(res=>this.users = res.data)   //获取数据
                // axios.post('/mock/users.json', {id: 1, name: 'aaa'})   // post请求
            }
        })

    </script>


</body>
</html>

拦截器

拦截器–》中间件 --》切面编程

分请求拦截器和响应拦截器

回调函数的参数config，就是当前请求的默认配置，一定要返回

请求拦截器

  axios.interceptors.request.use(config => {
    // 在请求拦截器中添加额外的请求头信息
    config.timeoute = 20000
    config.baseURL = url
    config.headers.token = 'awekfwekfjlwfjewlfjew;lfl;fejfejlfejl'

    return config
  })

响应拦截器

  axios.interceptors.response.use(res => {
    if (res.status !== 200) {
      return res.data
    }
    // alert('不好意思,数据没有得到')
    // 因为响应的数据异常,我统一处理已经解决不太好,可以让用户自己来捕获异常,进行提示处理
    return Promise.reject('nonono')
  }, err => Promise.reject(err))