axios介绍以及对axios进行二次封装

这篇具有很好参考价值的文章主要介绍了axios介绍以及对axios进行二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、axios基础

1、什么是axios?

2、axios的安装

3、axios常用配置项

4、axios和ajax的区别 

二、使用axios发送请求

1、 发送get无参请求

2、 发送get有参请求

3、 发送post无参请求

4、 发送post有参请求

4.1 发送json格式的数据:

4.2 发送表单格式的数据:

三、 then、catch、finally

四、axios快捷方法

五、axios实例

六、axios的全局配置

七、axios拦截器

八、 axios并发请求

九、axios二次封装


一、axios基础

1、什么是axios?

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

axios功能特点:

  • 在浏览器中发送 XMLHttpRequests 请求

  • 在 node.js 中发送 http请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 自动转换 JSON 数据

2、axios的安装

使用npm

npm install axios

使用cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

3、axios常用配置项

只有url选项式必须的,其他的都是可选,这里只列出一些常用配置项,axios还有很多其他的配置项,可以去axios官网查看。

axios({
	// 请求路径
	url:"",
	// 请求方式,默认发送get请求
	method:"",
	// get请求携带的参数写在params中
	params:{},
	// post请求携带的参数写在data中
	data:{},
	// 请求头
	headers:{},
	// 表示请求超过timeout时间没有响应就中断 (单位为毫秒)
	timeout:1000,
	// 规定后端返回的数据格式,默认值是json
	responseType: 'json'
})

注意:method默认值为get,因此发送get请求时可以不写methods,responseType默认值为json 

4、axios和ajax的区别 

ajax特点:
    1、ajax是异步的XML和JavaScript 
    2、可以运行浏览器 不可以运行在node
    3、发送给后台数据需要手动转换,请求头需要手动设置
    4、后端响应的数据需要自己转换成js对象格式(后台相应数据为json格式)
axios特点:
    1、axios是基于promise的http库
    2、可以调用promise的api
    3、axios默认发送就是get请求,发送数据默认格式为json
    4、axios请求头的数据格式会自动转换 

二、使用axios发送请求

1、 发送get无参请求

axios({
  url:'请求地址'
})

2、 发送get有参请求

发送get有参请求时,参数是以查询字符串的格式拼接到url地址中的。

我们把get请求需要携带的参数放到params中,axios会自动将它们转成查询字符串。

axios({
  url:'请求地址',
  // 将要传给后端的数据放到params中,axios会自动将它们转成查询字符串 (即 ?a=1&b=2)
  params:{
    a:1,
    b:2
  }
})

3、 发送post无参请求

axios({
  url:'请求地址',
  method:'post'
})

4、 发送post有参请求

4.1 发送json格式的数据:

使用post请求默认发送的数据格式是json格式

axios({
  url:"请求地址",
  method:"post",
  // 在请求头中指明发送的数据是json格式的数据,但是这里不写也可以,因为post请求默认发送的数据格式就是json 
  // headers:{
  //   "Content-Type":"application/json"
  // },
  data:{
    a:1,
    b:2
  }
})

4.2 发送表单格式的数据:

使用Qs工具将表单格式数据转成json格式的数据,需要先引入Qs:

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>
axios({
  url:"请求地址",
  method:"post",
  // 在请求头中指明发送的数据是表单格式的数据,但是这里不写也可以,因为axios请求头的数据格式会自动转换 
  headers:{
    // "Content-Type":"application/x-www-form-urlencoded",
    // 如果需要token认证,可以在请求头中携带
    "Authorization":token
  },
  // 这里使用Qs将表单格式的数据转成json格式数据传给后台,因为后台需要接收json格式的数据
  data:Qs.stringify({
    a:1,
    b:2
  })
})

三、 then、catch、finally

因为axios 是一个基于 promise 的 HTTP 库,因此它支持promise的api,我们可以在axios中使用then、catch、finally方法。

axios({
  url:"请求地址",
  method:"post",
  headers:{
    "Authorization":token
  },
  data:Qs.stringify({
    a:1,
    b:2
  })
}).then(res=>{
  console.log(res,'获取响应');
}).catch(err=>{
  console.log(err,'打印错误信息');
}).finally(()=>{
  console.log('最终执行');
})

四、axios快捷方法

axios提供了以下一些快捷方法:(中括号里面的表示可选参数,config配置对象和axios是一样的)

axios.request(config)   -->等同于 axios(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])  -->data表示要传递的参数

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

get、delete、head、options使用方法一致,post、put、patch使用方法一致。

(post 和 put:用来保存多条表单数据;patch:用来保存一条表单数据)

// 1、get无参请求
axios.get('请求地址').then(res=>{
  console.log(res);
})

//----------------------------------------

// 2、get有参请求
let url = '请求地址'
axios.get(url,{
  params:{
    a:1,
    b:2
  },
  timeout:2000
}).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3、post有参请求
// 3.1 json格式数据
let url = '请求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,data).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3.2 表单格式的数据
let url = '请求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,Qs.stringify(data),{
  headers:{
    "Authorization":token
  }
}).then(res=>{
  console.log(res);
})

五、axios实例

创建axios实例:
axios.create([config])

// 创建实例
let instance = axios.create({
  baseURL: '基础路径',
  timeout: 2000,
  headers:{
    "Authorization": token
  }
})
// 使用实例
instance.post('除去基础路径后剩下的路径',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
})

六、axios的全局配置

全局配置axios默认配置项:给所有axios请求都添加一些默认配置项

axios.defaults.baseURL = '基础路径';
axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

七、axios拦截器

axios给我们提供了两大类拦截器:

一种是请求拦截器,请求方向的拦截(成功请求,失败请求);

另一种是响应拦截器,响应方向的(成功响应,失败响应)

拦截器的作用:用于我们在网络请求的时候在发起请求或者响应时对操作进行相应的处理。

//请求拦截器 对所有的axios请求做一个拦截
axios.interceptors.request.use(
  config=>{
    // 在发送请求之前做些什么
    return config
  },
  error=>{
    // 对请求错误做些什么
    return Promise.reject(error)
  }
);

// 响应拦截器 对响应数据处理
axios.interceptor.response.use(
  response=>{
    // 对响应数据做点什么
    return response
  },
  error=>{
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

使用:

发送请求时,如果不是登录接口,需要携带token,那么我们可以在请求拦截器中做相应操作,响应拦截器主要用来对响应数据进行提取,因为响应拦截器返回的response是axios封装后的数据,而response.data才是后端返回的响应数据。

//请求拦截器
axios.interceptors.request.use(
  config=>{
    // 在发送请求之前做些什么
    if(config.url!=='登录接口'){
      // 需要携带token 每一个请求请求头需要携带token
      config.headers.Authorization='token值';
    }
    return config
  },
  error=>{
    // 对请求错误做些什么
    return Promise.reject(error)
  }
);
// 响应拦截器
axios.interceptor.response.use(
  response=>{
    // 对响应数据做点什么
    // response.data才是后端返回的响应数据,response是axios封装后返回的数据
    let res = response.data;
    return res
  },
  error=>{
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

axios.post('请求地址',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
});

八、 axios并发请求

使用axios并发请求可以一次性发送多个异步请求。

处理并发请求的助手函数:

axios.all(iterable)

axios.spread(callback)

axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(
	axios.spread((res1,res2,res3)=>{
		console.log(res1,res2,res3); //依次打印每一个响应
	})
)
axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(res=>{
	console.log(res) //打印一个数组,包含上述三个请求的响应结果
})

九、axios二次封装

我们在vue-cli脚手架中实现对axios的二次封装。

下载axios

-S 表示在生产环境下安装

cnpm i -S axios

下载Qs

cnpm i -S qs

在src下新建文件夹utils,utils文件夹下新建文件request.js 

axios介绍以及对axios进行二次封装

 src/utils/request.js

import axios from 'axios'
import Qs from 'qs'
let qs = Qs

// 创建axios实例对象
let instance = axios.create({
  baseURL:"基础路径",
  timeout:5000
})

// 请求拦截器
instance.interceptors.request.use(config=>{
  // console.log(config,'请求配置项');
  if(config.url !== '登录接口'){
    config.headers.Authorization = 'token值'
  }
  return config
},error=>{
  alert('请求失败')
  return Promise.reject(error)
})

// 响应拦截器
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))
}

// 导出axios实例
export default instance

使用:

src/views/AboutView.vue

axios介绍以及对axios进行二次封装

 src/views/HomeView.vue 

axios介绍以及对axios进行二次封装文章来源地址https://www.toymoban.com/news/detail-413437.html

到了这里,关于axios介绍以及对axios进行二次封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中axios的二次封装——vue 封装axios详细步骤

        api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。     通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢

    2024年02月02日
    浏览(48)
  • axios的二次封装

    1 axios是干什么的? XMLHttpRequest、jq、fetch、axios都是用来向服务器端发送请求,并获得响应 2 为什么要进行二次封装axios? 为了封装请求拦截器,响应拦截器 请求拦截器:可以在发送请求之前可以处理一些业务 响应拦截器:当服务器数据返回以后,可以处理一些事情 在src下创

    2023年04月12日
    浏览(92)
  • axios二次封装

    目录 第一章、前言 1.1 axios是什么 1.2 axios二次封装的原因 1.3 axios的特性 第二章、axios的二次封装 2.1 axios安装 2.2 axios封装一般步骤 2.3 axios封装常用的配置项 2.4 使用封装的axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,简单的理解就是ajax的封装 在使用Vue.js框架开发

    2024年02月07日
    浏览(59)
  • axios 二次封装

    基本上每一个项目开发,都必须要二次封装 axios。主要是为了减少重复性工作,不可能每一次发起新请求时,都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数,每次调用的时候只需要传入变化的参数。 :::warning 注意 基于上个

    2024年02月11日
    浏览(55)
  • 关于axios的二次封装

    @1 第一步 我们一般都会先导入axios         import axios from ‘axios’ @2 第二步 创建axios的实例 可以同时创建多个实例 每个实例配置不同         const http = axios.create( {                  // 这里面可以做一些基础的配置 比如基础路径 ,axios 请求超时的时间            

    2024年02月03日
    浏览(50)
  • Axios的二次封装(简单易懂)

    是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端 简单的理解就是ajax的封装 在使用Vue.js框架开发前端项目时 会经常发送ajax请求服务端接口 在开发过程中 需要对axios进一步封装 方便在项目中的使用 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求

    2023年04月09日
    浏览(102)
  • 二次封装ajax和axios

    2024年02月14日
    浏览(44)
  • Vue——axios的二次封装

    在 Vue 中,发送请求一般在 created 钩子中,当然放在 mounted 钩子中也没问题。 以下请求的前提都是安装了 axios,并且 import axios from \\\'axios\\\' 成功导入 Axios官网链接 get 请求传参,在地址里面通过 ?xxx=123 的形式 post 请求传参,在第二个参数里面传递 请求配置里面可以设置很多属性

    2024年02月11日
    浏览(46)
  • Vue电商项目--axios二次封装

    刚刚经过postman工具测试,发现接口果然发生了改变。 新的接口为 http://gmall-h5-api.atguigu.cn   如果服务器返回的数据code字段200,代表服务器返回数据成功 整个项目,接口前缀都有/api字样 XmlHttpRequest,fetch,JQ,Axios这些都是很优秀的网络请求库 为什么需要进行二次封装axios? 请

    2024年02月01日
    浏览(46)
  • axios二次封装(详细+跨域问题)

    一,为什么要对axios进行二次封装? 答:主要是要用到请求拦截器和响应拦截器; 请求拦截器 : 可以在发请求之前可以处理一些业务 响应拦截器 : 当服务器数据返回以后,可以处理一些事情 二,axios的二次封装 2.1 安装axios 在当前的项目路径下安装 安装成功 2.2 通常情况下

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包