当前位置:   article > 正文

axios详解,基本使用与封装_axios 封装

axios 封装

什么是Axios

Axios 是一个基于 Promise 的网络请求库(类似于jQuery的Ajax,用于HTTP请求),作用于node.js 和浏览器中。

对比

1. AJAX

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,是一个技术统称。

2. jQuery的$.ajax方法

AJAX的简化,jQuery是一个封装好的JavaScript库,所以jQuery的$.ajax方法比原生Ajax的简单
缺点:依赖 jQuery,配置繁琐,不轻量
选择建议:项目已经使用了jQuery,并且对HTTP请求没有特殊需求

3. Axios

基于 Promise的网络请求库,用于浏览器和Node.js中发送HTTP请求。axios是通过promise技术实现对ajax实现的一种封装,本身上来说axios就是ajax
缺点:可能出现跨域问题
选择建议:正在使用较新的JavaScript框架(如React、Vue等),并且需要高级HTTP功能

4. XMLHttpRequest

XMLHttpRequest是一个浏览器内置的JavaScript对象,它允许开发者在页面没有刷新的情况下从服务器请求数据,并接收服务器的响应。是AJAX的基础
缺点:配置和调用方式都很繁琐
选择建议:正在开发一个需要兼容旧浏览器或需要更精细地控制HTTP请求的应用

5. Fetch

Fetch API ES6 之后出现的基于 Promise 的一个JavaScript库,是一个现代的网络请求API,
缺点:新技术,部分浏览器可能不兼容
选择建议:正在开发一个不需要复杂HTTP处理功能的Web应用,并且希望使用原生的浏览器API

6. 总结

  1. ajax是一个技术的统称,是js异步技术的术语,XMLHttpRequest 是实现 Ajax 的一种方式。
  2. jQuery的$.ajax方法是一个方法,封装了Ajax
  3. axios是一个库,是用于网络请求的第三方库。
  4. fetch是一个api,是es6新增的用于网络请求标准api。
  5. XHR是一个 JavaScript 对象,可以封装Ajax

Axios的基本使用

get:一般用于获取数据
post:一般用于提交数据(表单提交与文件上传)
patch:更新数据(只将修改的数据推送到后端(服务端))(适合数据量比较大的更新)
put:更新数据(所有数据推送到服务端)(适合数据量比较小的更新)
delete:删除数据


// ————————axios get方法第一种写法————————

// get方法——————1.不带参数
axios.get('http://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  });

// get方法——————2.带参数

// 方式一:参数写在url中
axios.get('http://jsonplaceholder.typicode.com/posts/2')
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  });

// 方式二:参数写在params中
axios.get('http://jsonplaceholder.typicode.com/posts',{
  params:{
    id:2
  }
})
  .then(function (response) {
    // 处理成功情况
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  });

// ————————axios get方法的第二种写法————————

  // get方法——————1.不带参数
    axios({
      method:'get',
      url:'http://jsonplaceholder.typicode.com/posts', 
      }).then(res =>{
        console.log(res.data) 
      })  

  // get方法——————1.带参数
      axios({
        method:'get',
        url:'http://jsonplaceholder.typicode.com/posts', 
        params:{
            id:2
          } 
        }).then(res =>{
          console.log(res.data) 
        })   


// ————————axios post方法第一种写法————————
      // post请求常用的数据请求格式有两种:
      // application/json
      // form-data 表单提交(图片上传、文件上传)
    


      // application/json
      axios.post("/user", "id=123&name=zs")
        .then(res=>{
            console.log(res)
          });


     axios.post("/user", {
        id:123,
        name:'zs'
        })
        .then(res=>{
        console.log(res.data)
        });


        let data = {id:123,name:"zs"}
        axios({
          method:'post',
          url:'/user',
          // 与get请求使用params不同的是,post请求使用data属性
          data:data,
          }).then(res=>{
            console.log(res)
          })

      // form-data 表单提交(图片上传、文件上传)
      
        let data = {id:123,name:"zs"}
        let formData = new FormData();
        for (let key in data) {
          formData.append(key, data[key]);
        }
        console.log(formData);
        axios.post("/user", formData)
        .then((res) => {
          console.log(res.data);
        });



// ————————axios put方法————————

      axios.put("/user", {id:123,name:"zs"})
      .then(res=>{
      console.log(res)
      });

      axios.put("/user", data)
      .then(res=>{
      console.log(res)
      });

      axios({
          method:'put',
          url:'/user',
          // 与get请求使用params不同的是,post请求使用data属性
          data:data,})
          .then(res=>{
            console.log(res)
          })
          

// ————————axios patch方法————————

      axios.patch("/user", {id:123,name:"zs"})
      .then(res=>{
      console.log(res)
      });

      axios.patch("/user", data)
      .then(res=>{
      console.log(res)
      });


      axios({
          method:'patch',
          url:'/user',
          // 与get请求使用params不同的是,post请求使用data属性
          data:data,})
          .then(res=>{
            console.log(res)
          })



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158

ts封装Axios

为什么封装axios

观察下方的代码,我们发现只需要改变方法,请求路径,和请求返回的数据,但是每次都需要写很多东西,我们能不能只写我们需要的,其他的省略不写呢?这时候我们可以进行axios的封装

 axios({
        method:'get',
        url:'http://jsonplaceholder.typicode.com/posts', 
        }).then(res =>{
          console.log(res.data) 
        })   

 axios({
        method:'get',
        url:'http://jsonplaceholder.typicode.com/posts', 
        params:{
            id:2
          } 
        }).then(res =>{
          console.log(res.data) 
        })   

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

一次封装

http({
		url: '/api/v1/register',
		method: 'POST',
		data,
	});

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

一次封装后,我们只需要传入get或post方法,请求路径,和请求返回的数据,但是如果多个页面都需要这个请求呢,代码会不会太冗余?

二次封装

import {getInfor} from './axios/request'
const response = await getInfor();
  • 1
  • 2
//./axios/request.js
export const postRegister = (data) => {
	return http({
		url: '/api/v1/register',
		method: 'POST',
		data,
	});
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

二次封装后我们只需要引入getInfor方法,就可以实现网络请求。

如何封装

第一次封装

//http.js
import axios from "axios";

    // 1. 创建axios实例
    const instance = axios.create({
      baseURL: "http://jsonplaceholder.typicode.com",//请求的域名  url = baseURL + requestUrl
      timeout: 5000,// 请求超时时间
      // headers: { //设置请求头
      //   "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      // },
    });

    // ​2. axios拦截器的使用
    /** 需要拦截请求的原因
     *   1.config中包含了某些不符合服务器要求的信息
     *   2.发送网络请求的时候需要向用户展示一些加载中的图标
     *   3.网站需要登录才能请求资源,也就是需要token才能请求资源
     */

    // 2.1 添加请求拦截器
    // 添加公共请求头、处理请求参数等
    instance.interceptors.request.use(
      (config) => {
        // 在发送请求之前做些什么

        const token = localStorage.getItem('token')
        if (token) {
			config.headers.Authorization = `Bearer ${token}`;
		}

        
        return config; //拦截器里一定要记得将拦截的结果处理后返回,否则无法进行数据获取
      },
      (err) => {
        // 对请求错误做些什么


        return Promise.reject(err); // 在请求错误的时候的逻辑处理
      }
    );

    
    // 2.2 添加响应拦截器
    // 修改响应信息,比如数据转换、错误处理等
    instance.interceptors.response.use(
      (res) => {
        // 在请求成功后对响应数据做处理
        // console.log(res.data);
        if (res.status === 200) {
          return res.data;
        } 
      },
      (err) => {
        // 对响应错误做些什么
        if(err.response.status){
            switch (err.response.status) {
                case 400:
                // 处理错误信息,例如抛出错误信息提示,或者跳转页面等处理方式。
                  err.message = "错误请求";
                  break;
                case 401:
                  err.message = "未授权,请重新登录";
                  break;
                case 403:
                  err.message = "拒绝访问";
                  break;
                case 404:
                  err.message = "请求错误,未找到该资源!!!!";
                  alert(err.message)
                  break;
                case 405:
                  err.message = "请求方法未允许";
                  break;
                case 408:
                  err.message = "请求超时";
                  break;
                case 500:
                  err.message = "服务器端出错";
                  break;
                case 501:
                  err.message = "网络未实现";
                  break;
                case 502:
                  err.message = "网络错误";
                  break;
                case 503:
                  err.message = "服务不可用";
                  break;
                case 504:
                  err.message = "网络超时";
                  break;
                case 505:
                  err.message = "http版本不支持该请求";
                  break;
                default:
                  err.message = `连接错误${err.response.status}`;
            }
        }
      
        
        return Promise.reject(err); // 在响应错误的时候的逻辑处理
      }
    );



export default instance;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107

第二次封装

import http from './http'

export const getInfor = ()=>{
    return http({
            method:'get',
            url:'/posts', 
      })
}     

export const getInforDetail = (params)=>{
      return http({
              method:'get',
              url:'/posts', 
              params
        })
  }
  
  
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

使用


<script lang="ts" name="" setup>
	import axios from 'axios';
	import {getInfor,getInforDetail,postInfor } from './axios/request'
	
	async function get() {  
	    const response = await getInfor(); // 等待Promise解析  
	    console.log(response);
	    const response1 = await getInforDetail( {id:2}); // 等待Promise解析  
	    console.log(response1);
	}  
   get(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/810101
推荐阅读
相关标签
  

闽ICP备14008679号