Vue2中使用axios的三种方法

Posted 2023-03-31 小杨来谈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2中使用axios的三种方法相关的知识，希望对你有一定的参考价值。

第一种原始方法直接在项目中使用(不建议使用)

这种方法最简单粗暴

优点：不需要做封装，不需要做配置傻瓜式操作，不需要做异步处理

缺点：代码太繁琐，当遇到请求过多的时候，这样写不适合读写

注意：如果你封装的请求有问题解决不掉，可以用这种最原始的方式来解决

<template>
  <div>data</div>
</template>

<script>
/* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
/* 第二步引入axios */
import axios from 'axios'
export default 
  data() 
    return 
        data:""
    ;
  ,
  methods: 
      /* 第三步 写一个name事件  */
    name() 
      axios(
        method: "get",
        url: "http://yufei.shop:3000/tabbar",
      ).then(res=>
          this.data = res.data /* 将拿到的值，赋值给data */
      )
    ,
  ,
  /* 第四步 在create钩子函数中 将name事件在页面出现的时候执行 */
  created() 
    this.name();
  ,
;
</script>

第二种将请求挂载到全局( 推荐使用 )

优点：代码量减少，代码清晰，挂载到全局多处可以使用

缺点：vue3中不能这么使用，vue3换了一种方法来挂在全局

在main.js中

// 引入 axios
import axios from 'axios'

// 挂载一个自定义属性$http
Vue.prototype.$http = axios
// 全局配置axios请求根路径(axios.默认配置.请求根路径)
axios.defaults.baseURL = 'http://yufei.shop:3000'

在App.js中

<template>
  <div> data </div>
</template>

<script>
export default 
  data() 
    return 
        data:""
    ;
  ,
  methods:
     async name()   //async  await  是解决异步的一种方案，必须要加，但是原生封装就不用
          const data:res = await this.$http.get('/tabbar')
          this.data = res
      
  ,
  created()
      this.name()
  
;
</script>

第三种将代码进行封装

优点：代码量减少，代码清晰，挂载到全局多处可以使用，可以多层封装，vue3也可以这么使用

我们在src文件夹种创建一个文件叫APi ，然后在APi当前文件夹下创建一个request.js文件

目录结构如下

request.js代码如下

// 引入 axios
import axios from 'axios'
// 封装 baseURL
const request = axios.create(
    baseURL:"http://yufei.shop:3000"
)
// 向外暴露 request
export default request;

组件APP.vue代码如下

<template>
  <div> data </div>
</template>

<script>
// 1. 导入request
import request from '@/APi/request.js'
export default 
  data() 
    return 
        data:""
    ;
  ,
 
  methods:
    //    事件name
     async name() 
         const res = await request.get('/tabbar')
         this.data  = res.data
      
  ,
//   生命周期函数created中调用 事件name 
  created()
      this.name()
  
;
</script>

vue中数据请求的三种方法

注意请求可能存在跨域问题，需要去配置好

这三种建议使用axios

1.resource

　　Vue 要实现异步加载需要使用到 vue-resource 库。

　　Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

　　先导入一个线上cdn的地址，当然还可以去npm安装，但个人觉得这种方便

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

　　实现GET请求

    <div id="box">
        <ul>
            <li v-for=‘item of img‘><img :src=‘item.img‘ ></li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted() {
                //get请求
                this.$http.get(‘http://localhost:3000/api/banner‘).then(function(res){
                    this.img = res.body.data
                },function(){
                    console.log(‘请求失败处理‘);
                });
            }
        })
    </script>

　　如果需要传递数据，可以使用 this.$http.get(‘get.php‘,{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。

　　实现POST请求

<div id="box">
        <ul>
            <li v-for=‘item of img‘><img :src=‘item.img‘ ></li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted() {
                //post请求  需要第三个参数{emulateJSON:true}
                this.$http.get(‘http://localhost:3000/api/banner‘,{name: ‘王富贵‘},{emulateJSON:true}).then(function(res){
                    this.img = res.body.data
                },function(){
                    console.log(‘请求失败处理‘);
                });
            }
        })

　　post 发送数据到后端，需要第三个参数 {emulateJSON:true}。

　　emulateJSON 的作用：如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。

2.fetch（次方法vue自带的不需要安装其他）

　　GET方法

　　这个方法只能在地址栏传参

//get方法  只能在地址栏传参
fetch(‘http://localhost:3000/api/banner‘)
.then(res => {
    //return 返回给上一层 ,不然下一层用不了
    return res.json()
})
.then(data => {
    console.log(data)
})

　　POST方法

var url = ‘http://localhost:3000/api/user/loging‘
fetch(url, {
    method: ‘post‘,
    headers: {
        //这里是需要去network里面看
        ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
    },
    body: ‘tel=xdd212&password=1515‘
})
.then(res => {
    //return 返回给上一层 ,不然下一层用不了
    return res.json()
})
.then(data => {
    console.log(data)
})

　　另一种传参方式

//post 另一种传参方式
fetch(url, {
    method: ‘post‘,
    headers: {
        //看个人习惯
        ‘Content-Type‘: ‘application/json‘
    },
    body: JSON.stringify({
        tel: ‘xdd212‘,
        password: ‘1515‘
    })
})
.then(res => {
    //return 返回给上一层 ,不然下一层用不了
    return res.json()
})
.then(data => {
    console.log(data)
})

3.axios

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

　　用法和jq很类似

　　安装或者引入cdn地址 npm i axios

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

　　GET请求

    <div id="box">
        <ul>
            <li v-for=‘item of img‘><img :src=‘item.img‘ ></li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                //需要传参的话可以在地址栏后面拼接
                axios.get(‘http://localhost:3000/api/banner‘,
                //还可以这样传参
                //     {
                //         params:{
                //             name:‘王富贵‘
                //         }
                //     }
                )
                .then(res => {
                    console.log(res)
                })
            }
        })
    </script>

　　POST请求

    <div id="box">
        <ul>
            <li v-for=‘item of img‘><img :src=‘item.img‘ ></li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                //需要传参的话可以在地址栏后面拼接
                axios.post(‘http://localhost:3000/api/urse/loging‘,
                     {
                            age: 18
                             name:‘王富贵‘
                     }
                )
                .then(res => {
                    console.log(res)
                })
            }
        })
    </script>

　　一次执行多个请求

var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                function fn1(){
                    return axios.get(‘http://localhost:3000/api/banner‘)
                }
                function fn2(){
                    return axios.get(‘http://localhost:3000/api/pro‘)
                }
                //注意这里必须要使用数组
                axios.all([fn1() , fn2()])
                //函数里面对应的数字里面的值
                .then(axios.spread(function (fn1, fn2) {
                    console.log(fn1)
                }))
            }
        })

　　axios

　　可以自己配置参数

var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                axios({
                    //注意不写请求方式的话默认是get
                    method: ‘post‘,
                    url: ‘http://localhost:3000/api/user/loging‘,
                    data: {
                        tel: "xdd212",
                        password: "1515"
                    }
                })
                .then(res => {
                    console.log(res)
                })
            }
        })

　　你可以自己定义一个axios

        //这里创建一个自定义配置的axios
        var init = axios.create({
            //这里可配置文件的长路径
            baseURL: ‘http://localhost:3000/api‘
        })
        // 假设如果很多接口都需要使用 token验证，可以把token信息放在请求头
        init.defaults.headers.token = ‘1231654984561646546565464654654646321654asdasdasd‘

        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                //下面调用axios的时候就是调用我们自定义创建的
                init({
                    method:‘get‘,
                    //然后到这下面可以直接写短路径，后期方便维护
                    url: ‘/banner‘
                })
                .then(res => {
                    console.log(res)
                })

                //此方法也是一样
                init.get(‘/banner‘)
                .then(res => {
                    console.log(res)
                })
            }
        })

　　拦截器

　　请求拦截器和响应拦截器

//请求前
        axios.interceptors.request.use(function (config) {
            // 可以设置 加载的动画效果 的展示
            //这里指的是请求之前做点什么
            console.log(‘正在加载...‘)
            return config
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        })

        //响应前
        axios.interceptors.response.use(function (config) {
            // 可以设置 加载的动画效果 的隐藏
            //这里指的是请求之前做点什么
            console.log(‘加载完毕‘)
            return config
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        })

        var app = new Vue({
            el: ‘#box‘,
            data: {
                img: ‘‘
            },
            mounted(){
                axios.get(‘http://localhost:3000/api/banner‘)
            }
        })

以上是关于Vue2中使用axios的三种方法的主要内容，如果未能解决你的问题，请参考以下文章

vue.js中使用Axios

Axios使用Post向Spring传递POJO对象的三种方法（@RequestBody与@RequestParam注解）

使用 Vue.js 进行异步/等待 axios 调用

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用)

第二种 将请求挂载到全局( 推荐使用 )

第三种 将代码进行封装

vue中数据请求的三种方法

1.resource

实现GET请求

实现POST请求

2.fetch（次方法vue自带的不需要安装其他）

GET方法

3.axios

GET请求

POST请求

一次执行多个请求

axios

拦截器

第一种原始方法直接在项目中使用(不建议使用)

第二种将请求挂载到全局( 推荐使用 )

第三种将代码进行封装

　　实现GET请求

　　实现POST请求

　　GET方法

　　GET请求

　　POST请求

　　一次执行多个请求

　　axios

　　拦截器