Axios在vue项目中的封装步骤

目录

• 1. 什么是Axios？
• 2. 回顾Ajax
• 3. 回顾Promise
• 4. Vue封装Axios

1. 什么是Axios？

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，是一个第三方插件，第三方异步请求工具库

Axios的特点：

• 可以运行在浏览器和node.js环境中
• 基于promise，可以调用promiseAPI
• 默认发送的是get请求，默认post请求发送的数据格式是JSON
• 除了表单格式数据，对请求数据和响应数据可以自动转换JSON数据格式。
• 可以对请求和响应做拦截

2. 回顾Ajax

Ajax的特点：

• 异步的JavaScript和XML
• 可以在浏览器中运行，但是不可以在node.js环境下运行
• 请求数据和响应数据需要手动转换格式
• 请求头也需要手动设置

Ajax创建步骤：

    // 1.创建XMLHttpRequest实例
    let xhr = new XMLHttpRequest()
    // 2.打开一个连接
    xhr.open('请求方式get/post','请求地址')
    // 3.发送请求
    // 必要时还需设置请求头格式：JSON/application/x-www-form-urlencoded
    xhr.setRequestHeader()
    // 必要时还需转换请求数据格式：JSON.stringfy(参数)/Qs.stringfy(参数)
    xhr.send(请求参数)
    // 4.接收响应
    xhr.onreadystatechange=function(){
      // 判断：请求是发送完成和请求是否发送成功
      if(xhr.readyState===4 && xhr.status===200){
        // 接收响应:必要时还要转换响应数据的格式 JSON.parse(xhr.response)
        console.log(xhr.response);
      }
    }

3. 回顾Promise

Promise是一种异步编程解决方案。Promise构造函数接收两个参数：resolve和reject。resolve作为成功的回调函数，reject作为失败的回调函数。

  // 1.创建promise对象
        let p1=new Promise((resolve,reject)=>{
            // resolve,reject是回调函数
            // resolve函数是promise对象最终状态为成功状态
            //reject函数是promise对象最终状态为失败状态

            //非异步
            //假设异步操作执行成功，修改promise对象状态为成功状态
            if(3>2){
                resolve('success')
            }else{
                //假设异步操作执行失败，修改promise对象状态为失败状态
                reject('error')
            }
        })
        //如何提供resolve和reject函数
       //在promise原型里有then和catch
        // 1.then方法表示的是成功之后的回调，对应resolve
        // 2.catch方法表示的是失败之后的回调，对应reject
        p1.then((res)=>{
            console.log(res,'成功回调')
        }).catch((error)=>{
            console.log(error,'失败回调')
        }).finally(()=>{
            console.log('最终执行')
        })
		//如果then里面传了两个回调函数,第一个代表成功之后的回调，第二个代表失败之后的回调,分别代表resolve()和reject()
		p1.then((res)=>{
            console.log(res,'成功')
        },(err)=>{
            console.log(res,'失败')
        });

4. Vue封装Axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。jQuery中也封装了ajax机制，但是仅适用于浏览器。

功能特点:

• 在浏览器和node.js中皆可用
• 自动转化请求数据和响应数据格式为JSON数据格式
• 可以做拦截请求和响应拦截
• 可以调用Promise的API
• axios默认发送请求为get方式，默认数据格式为JSON格式

封装步骤：

在项目中安装axios：npm i -S axios创建封装axios的文件夹并导入axios，根据项目所需创建axios API：

import axios from "axios";
import Qs from 'qs';
let qs= Qs;
// 创建axios实例对象
let instance = axios.create({
	baseURL:"http://121.199.0.35:8888",
	timeout:5000
});
// 请求拦截器
instance.interceptors.request.use(config=>{
	if(config.url!=='/user/login'){
		config.headers.Authorization='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY';
	}
	return config
},error=>{
	return Promise.reject(error)
});
// 响应拦截器 ---对axios封装响应数据做拦截
instance.interceptors.response.use(response=>{
	let res=response.data;
	return res
},error=>{
	return Promise.reject(error)
});

// 封装get方法
export function get(url,params){
	return instance.get(url,{
		params,
	})
}
//封装postJSON方法 json数据格式 --登录接口
export function postJSON(url,data){
	return instance.post(url,data);
}

// 封装post方法 表单格式数据
export function post(url,data){
	return instance.post(url,qs.stringify(data))
}

export default instance

到此这篇关于Axios在vue项目中的封装方法的文章就介绍到这了,更多相关Axios vue封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！