首页 > 资讯 > 前端开发 > JavaScript >基于axios在vue中的使用

821

分享到

基于axios在vue中的使用

2024-04-02 19:04:59 821人浏览泡泡鱼

摘要

目录一、AxiOS是什么二、Axios有哪些特性三、Axios浏览器支持四、安装1.使用 npm2.使用 bower3.使用 cdn五、用法（Vue项目已搭建）1. Axios基础用

一、Axios是什么

Axios是一个基于promise的Http库（类似于Jquery的ajax，用于HTTP请求）
可以用于浏览器和node.js（既可以用于客户端也可以用于node.js编写的服务端）

二、Axios有哪些特性

支持promise api
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

三、Axios浏览器支持

四、安装

1.使用 npm

$ npm install axios

2.使用 bower

$ bower install axios

3.使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

五、用法（vue项目已搭建）

1. Axios基础用法

（get、post、put 等请求方法）

先介绍一下，Axios常用的几种请求方法有哪些：get、post、put、patch、delete

get：（一般用于）获取数据
post：提交数据（表单提交+文件上传）
put：更新（或编辑）数据（所有数据推送到后端（或服务端））
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据

题外话，一般公司在实际开发项目过程中：

（1）post：一般用于新建

（2）put：一般用于更新（适合数据量比较少的更新）

（3）patch：一般用于数据量比较大；假如一个表单的数据量很大，有很多项，使用put的话，全部数据推送一次是比较耗性能的，这个时候可以考虑用patch，只将修改的数据推送到后端

以上这些题外话，只是一般的常规用法，不能代表一定要这样用；当然了，你可能会说我用post来获取数据，行不行？这个当然行了，绝对没问题！具体怎么用还是前后端一起商量着决定，以免发生不愉快的肢体冲突！

哈哈哈，严重了啊，开个玩笑！

（1）get 请求

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// get 请求
export default {
  name: "get",
  created() {
 
    //第一种写法叫做get别名请求方法
    //http://localhost:8080/static/data.json?id=1
    axios.get('../../static/data.json', {
      params: {//有参数时,若无参数时直接省略不写
        id: 1
      }
    }).then((res) => {
      console.log('数据：', res);
    })
 
    //第二种写法
    axios({
      method: 'get',
      url: '../../static/data.json',
      params: {
        id: 1
      }
    }).then((res) => {
      console.log('数据：', res)
    })
  }
}
</script>
 
<style scoped>
 
</style>

下面了解一下请求信息---

Status Code:304 Not Modified---304是重定向；正常情况下，第一次访问接口的时候返回的都是200；当你第二次访问接口的时候，如果数据没有变化，那么浏览器会自动识别返回一个状态304，代表数据没有更改、重定向；相当于重定向到你刚刚访问的资源，这样的话会加载更快！

（2） post 请求

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// post 请求
export default {
  name: "post",
  created() {
 
    
 
    //第一种写法叫做post别名请求方法
    // http://localhost:8080/static/data.json?id=1
    // applicition/json 请求
    let data = {
      id: 1
    }
    axios.post('../../static/data.json', data)
      .then((res) => {
        console.log('数据：', res);
      })
    //第二种写法
    axios({
      method: 'post',
      url: '../../static/data.json',
      data: data,
    }).then((res) => {
      console.log('数据：', res)
    })
    // fORM-data 请求
    let formData = new FormData()
    for (let key in data) {
      formData.append(key, data[key])
    }
    axios.post('../../static/data.json', formData)
      .then((res) => {
        console.log('数据：', res);
      })
  }
}
</script>
 
<style scoped>
 
</style>

了解一下，post两种请求方式的Content-Type和参数有哪些不同---

applicition/json：如下图

form-data：如下图

（3）put、patch 请求

说明一下，put和patch请求与post请求用法一样类似，同样有applicition/json和form-data，为了节省时间就不过多赘述了，简单写一下！

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// put、patch 请求
export default {
  name: "put，patch",
  created() {
 
    let data = {
      id: 1
    }
    // put 请求
    axios.put('../../static/data.json', data)
      .then((res) => {
        console.log('数据：', res);
      })
    // patch 请求
    axios.patch('../../static/data.json', data)
      .then((res) => {
        console.log('数据：', res);
      })
  }
}
</script>
 
<style scoped>
 
</style>

（4）delete 请求

delete请求与前四种请求稍有一点不同：delete请求有时候需要把参数拼接到URL上，有时候像post请求那样把参数放在请求体里面。至于具体怎么调用，需要和后端商量好！

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// delete 请求
export default {
  name: "delete",
  created() {
 
    // delete 请求
    axios.delete('../../static/data.json', {
      params: {// 把参数拼接到URL上
        id: 1
      }
    })
      .then((res) => {
        console.log('数据：', res);
      })
 
    axios.delete('../../static/data.json', {
      data: {// 把params改成data，把参数放在请求体里面
        id: 1
      }
    })
      .then((res) => {
        console.log('数据：', res);
      })
    // 不用别名方法
    axios({
      method: 'delete',
      url: '../../static/data.json',
      //params: {id: 1},// 把参数拼接到URL上
      data: {id: 1}// 把参数放在请求体里面
    }).then((res) => {
      console.log('数据：', res)
    })
  }
 
}
</script>
 
<style scoped>
 
</style>

了解一下，把参数拼接到URL上和放在请求体里面有什么不同---

params（把参数拼接到URL上），如下图：

data（把参数放在请求体里面），如下图：

（5）并发请求

并发请求：同时进行多个请求，并统一处理返回值。

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
 
// 并发请求
export default {
  name: "get",
  created() {
 
    // 并发请求用到了axios的两个方法：axios.all('参数是一个数组')、axios.spread('回调函数')
    axios.all([
      axios.get('../../static/data.json'),
      axios.get('../../static/city.json')
    ]).then(axios.spread((dataRes, cityRes) => {
      console.log(dataRes, cityRes)
    }))
  }
}
</script>
 
<style scoped>
 
</style>

2. Axios进阶用法

（实例、配置、拦截器、取消请求等）

（1）axios实例和配置

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
// axios 实例
// 后端接口地址有多个，并且超时时长不一样
export default {
  name: "get",
  created() {
    //创建axios实例
    let instance = axios.create({//参数配置
      baseURL: 'http://localhost:8080',//请求的域名(或基本地址)
      timeout: 3000,//请求的超时时长(默认：1000毫秒(ms)，超过这个时长会报401超时)
      //url: '../../static/data.json',//请求的路径
      //method: 'get',//请求方法
      headers: {//设置请求头(给请求头添加一些参数)
        token: ''
      },
      //params: {id: 1},//请求参数拼接在URL上
      //data: {id: 1}//请求参数放在请求体
    })
    instance.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })
    //假如有两个域名或设置超时时长不一样，你可以再创建一个axios实例
    let instance2 = axios.create({
      baseURL: 'http://localhost:9090',
      timeout: 5000
    })
    instance2.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })
 
    //1.axios全局配置
    axios.defaults.baseURL = 'http://localhost:8080';
    axios.defaults.timeout = 3000;
    //2.axios实例配置
    let instance = axios.create();
    instance.defaults.timeout = 4000;
    //3.axios请求配置
    instance.get('../../static/data.json', {
      timeout: 6000
    })
      .then((res) => {
        console.log(res)
      })
    //优先级从低到高：1.axios全局配置 < 2.axios实例配置 < 3.axios请求配置
  }
}
</script>
 
<style scoped>
 
</style>

（2）拦截器

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>
 
<script>
import axios from 'axios'
// 拦截器：在请求或响应被处理前拦截它们
// 请求拦截器、响应拦截器
export default {
  name: "get",
  created() {
    //请求拦截器
    axios.interceptors.request.use(config => {
      //在发送请求前做些什么
      return config;
    }, err => {
      //在请求错误的时候做些什么
      return Promise.reject(err);
    })
 
    //响应拦截器
    axios.interceptors.response.use(res => {
      //请求成功对响应数据做处理
      return res;
    }, err => {
      //响应错误做些什么
      return Promise.reject(err);
    })
 
    //取消拦截器(了解)
    let interceptors = axios.interceptors.request.use(config => {
      config.headers = {
        auth: true
      }
      return config;
    })
    axios.interceptors.request.eject(interceptors);
 
    //例子：登录状态（token:''） 需要登录的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config => {
      config.headers.token = '';
      // config.headers = {//这种写法会覆盖掉headers中的其他参数，导致headers中只包含token这一个参数，所以不建议这种写法
      //   token: ''
      // }
      return config;
    }, err => {
      return Promise.reject(err);
    })
 
    //移动端弹窗
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config => {
      $('#modal').show();
      return config;
    })
    instance_phone.interceptors.response.use(res => {
      $('#modal').hide();
      return res;
    })
  }
}
</script>
 
<style scoped>
 
</style>

3.Axios进一步封装

在项目中的实际应用

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。axios有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。

本文介绍的axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。

（1）第一步：src/api/request.js

import axios from 'axios'
// import Vue from 'vue';
// import store from '../store';
// import {router} from '../router/index';
 
// let vm = new Vue();
 
const instance = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 3000,
  // headers: {
  //   post: {
  //     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  //   }
  // }
})
 
// 请求拦截
instance.interceptors.request.use(config => {
  // 自定义header，可添加项目token
  // if (store.state.app.token) {
  //   config.headers.token = store.state.app.token;
  //   config.headers.timestamp = new Date().getTime();
  // }
  return config;
}, error => {
  return Promise.reject(error);
})
 
// 响应拦截
instance.interceptors.response.use(response => {
  // const resCode = response.status;
  // if (resCode === 200) {
  //   return Promise.resolve(response);
  // } else {
  //   return Promise.reject(response);
  // }
  return response;
}, error => {
  // const resCode = error.response.status;
  // switch (resCode) {
  //   case 401:
  //     vm.$Message.error(error.response.data.message);
  //     store.commit('loGout', this);
  //     store.commit('clearOpenedSubmenu');
  //     // console.log('token-0', store.state.app.token);
  //     router.replace({
  //       name: 'login'
  //     });
  //     break;
  //   case 404:
  //     vm.$Message.error('网络请求不存在');
  //     break;
  //   case 500:
  //     vm.$Message.error('服务器连接错误');
  //     break;
  //   // 其他状态码错误提示
  //   default:
  //     vm.$Message.error(error.response.data.message);
  // }
  return Promise.reject(error);
})
 

export function Get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 

export function Post(url, params) {
  return new Promise((resolve, reject) => {
    instance.post(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 

export function Put(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 

export function Patch(url, params) {
  return new Promise((resolve, reject) => {
    instance.put(url, params).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}
 

export function Delete(url, params) {
  return new Promise((resolve, reject) => {
    instance.delete(url, {
      params: params
    }).then((res) => {
      resolve(res.data);
    }).catch((error) => {
      reject(error.data);
    })
  })
}

（2）第二步：src/api/index.js

import {Get,Post,Put,Patch,Delete} from "@/api/request";
 
export default {
  getListData: (params) => {
    return Get('../../static/data.json',params);
  },
  postListData: (params) => {
    return Post('../../static/data.json',params);
  },
  deleteListData: (params) => {
    return Delete('../../static/data.json',params);
  }
}

（3）第三步：src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
import Api from './api/index';
 
Vue.config.productionTip = false
Vue.prototype.$axios = Api;
 

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

（4）第四步：src/components/HelloWorld.vue

<template>
 
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {
    getData() {
      let data = {
        id: 1
      }
      this.$axios.getListData(data)
        .then((res) => {
          console.log(res);
        })
    },
    postData() {
      let data = {
        id: 1,
        msg: 2
      }
      this.$axios.postListData(data)
        .then((res) => {
          console.log(res);
        })
    },
    postFormData() {
      let data = {
        id: 1,
        msg: 2
      }
      let formData = new FormData();
      for (let key in data) {
        formData.append(key, data[key]);
      }
      this.$axios.postListData(formData)
        .then((res) => {
          console.log(res);
        })
    },
    deleteData() {
      let data = {
        id: 1
      }
      this.$axios.deleteListData(data)
        .then((res) => {
          console.log(res);
        })
    },
  },
  created() {
    this.getData();
    this.postData();
    this.postFormData();
    this.deleteData();
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 基于axios在vue中的使用

本文链接: https://www.lsjlt.com/news/144324.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

基于axios在vue中的使用

目录一、Axios是什么二、Axios有哪些特性三、Axios浏览器支持四、安装1.使用 npm2.使用 bower3.使用 cdn五、用法（vue项目已搭建）1. Axios基础用...

99+

2022-11-13
基于axios在vue中如何使用

本文小编为大家详细介绍“基于axios在vue中如何使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“基于axios在vue中如何使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、Axios是什么Axios...

99+

2023-06-29
在Vue-cli里基于axios封装复用请求的示例分析

这篇文章给大家分享的是有关在Vue-cli里基于axios封装复用请求的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。安装只用安装一个axios就可以了。npm ...

99+

2022-10-19
VUE零基础入门axios的使用

目录一.axios是什么二.axios的特点三.axios怎么安装四.在VUE全局挂载导入挂载使用五.axios便捷方法六.axios基础方法七.axios执行结果八.config ...

99+

2022-11-13
vue中如何实现基于axios的ajax请求方法

小编给大家分享一下vue中如何实现基于axios的ajax请求方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！如下所示：imp...

99+

2022-10-19
Vue中axios的基本用法详解

目录1.什么是axios2.axios的特征3.axios在使用的时候需要注意的细节4.axios在vue中的实例运用(留言评论接口)App.vue代码mian.js代码1.什么是a...

99+

2022-11-13
基于axios请求封装的vue应用实例代码

目录什么是axios？axios的请求类型？axios封装默认的自定义配置配置的加载优先级拦截器get请求post请求delete请求put请求：更新整个对象资源patch...

99+

2022-11-12
Vue中的计算属性和axios基本使用回顾

目录1. 什么是计算属性2. 计算属性的特点计算属性3. 如何声明计算属性4. 计算属性的使用注意点5. 计算属性 vs 方法6. axiosaxios的基本使用总结1. 什么是计算...

99+

2023-01-28

Vue计算属性 Vue axios基本使用 Vue中axios使用
vue中axios的使用详解

目录1、选择什么网络模块2、JSONP3、axios的请求方式4、axios框架的基本使用1、新建vue项目2、安装axios依赖3、编写代码4、请求结果5、axios发送并发请求方...

99+

2022-11-13
Vue axios和vue-axios的关系及使用区别

目录axios和vue-axios的关系/区别axios和vue-axios的使用方式区别1、axios使用方式2、vue-axios使用方式axios和vue-axios的使用哪一...

99+

2022-11-13

Vue axios和vue-axios关系 Vue axios和vue-axios使用区别 Vue axios和vue-axios区别
vue中axios如何使用

这篇文章主要讲解了“vue中axios如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中axios如何使用”吧！1.axios配置我的目录结构src/axios/in...

99+

2023-07-04
vue axios数据请求及vue中使用axios的示例分析

这篇文章将为大家详细讲解有关vue axios数据请求及vue中使用axios的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。axios 简介axios 是一个基...

99+

2022-10-19
如何在Vue项目中使用axios请求

目录1、安装2、没有封装存在的问题3、创建文件4、请求地址配置5、axios 配置，设置请求头及响应码处理6、使用在实际的项目中，和后台的数据交互是少不了的，我通常使用的是 axio...

99+

2022-11-12
如何在Vue中使用axios上传图片

如何在Vue中使用axios上传图片？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。在vue和axios的配合下实战一波<!-- &nbs...

99+

2023-06-15
vue开发中关于axios的封装过程

目录关于axios的封装vue中axios全局封装axios封装api的统一管理关于axios的封装下面代码参考了 vue-element-admin 中的封装方式，request...

99+

2022-11-13

vue axios封装关于axios的封装 axios的封装
如何在vue项目中使用封装后的axios

这篇文章给大家介绍如何在vue项目中使用封装后的axios，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试...

99+

2023-06-06
如何在 Vue 中使用 Axios 异步请求API

目录设置基本 HTTP 请求 Axios 配合 async/await Axios 的错误处理发送POST请求用 Axios 编写可复用的 API 调用最终代码设置基本 HTT...

99+

2022-11-12
vue中axios和ajax怎么使用

这篇文章主要讲解了“vue中axios和ajax怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中axios和ajax怎么使用”吧！vue中axios和ajax区别是：1.axi...

99+

2023-07-04
vue项目中如何使用axios

这篇文章主要介绍了vue项目中如何使用axios的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue项目中如何使用axios文章都会有所收获，下面我们一起来看看吧。Axios简介axios框架全称（ajax –...

99+

2023-07-04
Vue+Typescript中在Vue上挂载axios使用时报错怎么办

这篇文章将为大家详细讲解有关Vue+Typescript中在Vue上挂载axios使用时报错怎么办，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在vue项目开发过程中，为...

99+

2022-10-19