代码编织梦想

Axios 介绍


官方文档: http://www.axios-js.com/zh-cn/docs/

在前端页面展示的数据大多数都是通过访问一个 API 获取的,做这件事的方法有好几种,例如 jquery ajax 、 vue-resource、 axios ,而 vue-resource vue 插件,但 3 版本不再更新,目前官方推荐主流的 axios aixos 是一个http请求库。(本质上是基于阿贾克斯axios的封装)

Axios 使用


安装 axios:npm install axios ,在组件中导入并使用:import axios from 'axios'   ,这是局部导入的方式。
另外一种是全局导入,先去封装axios,然后导入。

GET、POST  请求  axios.get().then()


使用 axios.get 发起 GET 请求,使用.then 获取响应数据。先去实现一个Home组件,Home.vue里面的内容:
<template>
    <div>
        <button type="button" @click="getData()">AxiosGet</button><br>
         axios get获取到的数据:<p style="color: red;">{{ resdata }}</p>   
    </div>    
</template>


<script>
//导入axios,取别名为axios为下面使用
import axios from 'axios'
export default ({
    data() {
        return{
          resdata: {

          }
        }
    },
    methods:{
        getData(){
            //使用axios发起HTTP get请求
            axios.get('http://httpbin.org/get')
           
           //then表示http请求成功情况下,拿到响应,response是响应内容
           .then(response=>{
                this.resdata = response
           }
           )
        }
    }
})
</script>

在main.js当中,全局导入组件

import { createApp } from 'vue'

import App from './App.vue'
import Test from '@/components/Test.vue'
import Home from '@/components/Home.vue'

const vm = createApp(App)
vm.component('Test',Test)
vm.component('Home',Home)
vm.mount('#app')

App.vue当中全局导入Home组件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Home></Home>
  <HelloWorld  msg="父亲组件App 子组件HelloWorld" />
</template>

 如果是post请求

axios.post('http://httpbin.org/post')

异常处理  axios.get().then().catch()


很多时候我们可能并没有从 API 获取想要的数据。这可能是由于很多种因素引起的,比如 axios 调用可能由于多种原因而失败,包括但不限于:

  • API 不工作了
  • 请求发错了
  • API 没有按我们预期的格式返回信息。

可以使用catch异常处理这些问题, 模拟连接一个不存在的地址,前段给出提示:

<template>
    <div>
        <button type="button" @click="getData()">AxiosGet</button><br>
         axios get获取到的数据:<p style="color: red;">{{ resdata }}</p>   
    </div>    
</template>


<script>
//导入axios,取别名为axios为下面使用
import axios from 'axios'
export default ({
    data() {
        return{
          resdata: {

          }
        }
    },
    methods:{
        getData(){
           //使用axios发起HTTP get请求
           axios.post('http://httpbin.org/post1')
            //then表示http请求成功情况下,拿到响应,res是响应内容
           .then(response=>{
                this.resdata = response
           }
           )
           .catch(response=>{
                alert(response.message)
                console.log(response.message)
            })
        }
    }
})
</script>

还有一个能力是无论成功与否,都会执行,有一个finally。

 axios.post('http://httpbin.org/post1')
            //then表示http请求成功情况下,拿到响应,res是响应内容
           .then(response=>{
                this.resdata = response
           }
           )
           .catch(response=>{
                alert(response.message)
                console.log(response.message)
            })
            .finally(()=>{
                console.log("最后执行的内容")
            })

全局默认值  一般情况下不这么使用


在实际开发中,几乎每个组件都会用到axios发起数据请求(每个页面的数据都是活的,不可能数据发生变化的时候都去更新代码),如果每次都填写完整的请求路径,不利于后期维护。这时可以设置全局axios默认值。

添加 axios 全局配置:(axios做一些全局的配置)
//导入vue依赖当中的createApp方法,这里的createApp是原生方法名称,不能改
import { createApp } from 'vue'
import App from './App.vue'

//导入组件,这种方式是将整个Test.vue界面都导入进来,这里的Test是别名可以随便取
import Test from '@/components/Test.vue'


//添加axios全局配置
//1 引入axios
import axios from 'axios'
//2 设置axios的全局配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000

const app = createApp(App)
//使用component去注册组件,第一个参数是组件名称,自定义,第二个是上面定义的组件import Test from 
app.component('Test',Test)
app.mount('#app')

<template>
    <div>
        <button @click="getData()">axios获取后端数据</button>
        <p>{{ data }}</p>
    </div>
</template>

<script>
//导入aixos
import axios from 'axios'//'axios'是正真的第三方包,axios是别名

export default({
    data() {
        return{
            data: ''
        }
    },
    methods:{
        getData(){
           //设置了全局的baseUrl后
           //使用axios发起http的get请求,发起axios请求,它会去和默认的baseURL做拼接
            axios.get('/get')
           // axios.get('http://httpbin.org/get')
           //then表示http请求成功情况下,拿到响应,res是响应内容
            .then(res =>{
                this.data = res.data
            })

            .catch(res=>{
                alert(res.message)
            })
            //无论成功与否
            .finally(res=>{
                console.log("这是最后执行的命令")
            })
        }
    }
})
</script>

可以看到,会去做自动的拼接。

自定义实例默认值


有时候服务端接口有多个地址,就会涉及请求的域名不同、配置不同等,这时自定义实例可以很好解决。

上面这种全局默认值一般不使用,我们要自己去封装一个axios,使用下面方式,这里这个文件会去封装axios。

//封装axios
//做一些全局配置,以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//暴露新的axios实例
export default instance

在src目录下面创建一个request的文件夹。

做全局配置和拦截器的配置 

//封装axios
//做一些全局配置,以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//暴露新的axios实例
export default instance

<template>
    <div>
        <button @click="getData()">axios获取后端数据</button>
        <p>{{ data }}</p>
    </div>
</template>

<script>
//导入aixos
//import axios from 'axios'//'axios'是正真的第三方包,axios是别名

import http from '@/request'

export default({
    data() {
        return{
            data: ''
        }
    },
    methods:{
        getData(){
            //使用新的axios实例发起请求
            http.get("/get")

            //设置了全局的baseUrl后
            //使用axios发起http的get请求,发起axios请求
           // axios.get('/get')
           // axios.get('http://httpbin.org/get')
            //then表示http请求成功情况下,拿到响应,res是响应内容
            .then(res =>{
                this.data = res.data
            })

            .catch(res=>{
                alert(res.message)
            })
            //无论成功与否
            .finally(res=>{
                console.log("这是最后执行的命令")
            })
        }
    }
})
</script>

 一般都是使用上面这种方式去封装axios,自己封装或者从其他项目里面copy过来、

拦截器

正常情况下打开一个浏览器,前端页面向后端页面发起请求,使用的是aixos发起请求,无论是原装的还是封装的axios,后端去数据库中拿数据返回给前端。

发起请求的地方是axios,你那个自己封装axios,那么你就可以添加拦截器。

请求拦截器就是你在发起请求的时候要做什么事情,响应拦截器就是在接受到请求之后,去干嘛干嘛。

  • 拦截器可以拦截每一次请求和响应,然后进行相应的处理。(前端调后端,后端是有鉴权逻辑的,前端要加一个token,前端在登入的时候就获取到这个token了,每次发起请求的时候这个token加入到url参数内)
  • 请求拦截应用场景: 发起请求前添加header
响应拦截应用场景:
  • 统一处理API响应状态码200或非200的提示消息(拿到业务的状态码做一些自定义的响应配置)
  • 统一处理catch异常提示信息
  • src/request/index.js 示例代码

//封装axios
//做一些全局配置,以及拦截器的配置
import axios from "axios";

//实例化axios对象
const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000,
})

//添加请求拦截器,config接受参数的方式,随意命名
instance.interceptors.request.use(config=>{
    //在请求发送之前做的事情,比如添加请求头
    config.headers['Test-Header'] = 'zangsan'
    return config
},
   //请求发生了error
   error=>{
    //处理错误请求
    //axios是基于ajax和promise封装的
    //promise.reject就表示使用instance发起请求的时候,失败了在catch中获取错误
    return Promise.reject(error)
   }
)

//添加响应拦截器
instance.interceptors.response.use(res=>{
 //响应接收后做的事情,在then catch finally之前做的事情
 if(res.status != 200){
    alert("数据请求失败")
 }
 return res
},
error =>{
    //非200状态码走这里
    return Promise.reject(res)
}
)

//暴露新的axios实例
export default instance

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_34556414/article/details/131716293

Vue - 前后端交互-爱代码爱编程

1. 前后端交互模式 1.1 接口调用方式 原生Ajax基于JQuery的Ajaxfetchaxios1.2 URL地址 1.2.1 传统形式的URL 格式:schema://host:post/path?query#fragment schema:协议host:域名或IP地址port:端口,http默认端口80,可省略path:路径quer

vue集成axios、jquery、layer,ajax前后端交互参数接受-爱代码爱编程

一、集成axios   1、 npm安装axios npm install --save axios vue-axios  2、在 main.js 中导入 import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)  3、使用方式  

关于axios_会飞的土豆i的博客-爱代码爱编程

一:安装axios -g: 表示全局安装 npm i axios -g 二:引入、配置axios (vue2) 需要在 man.js 入口文件中,通过Vue 构造函数和Prototype 原型对象 全局配置 axios import Vue from 'vue' import App from './App.vue' // 1: 导入 axio

再vue项目中使用axios原生发送post请求-爱代码爱编程

前言:在大多数项目开发中,都是采用前后端分离架构,在此情况下都采用一些成熟的框架,类似于ruoyi,因为成熟所以前端的请求都进行了各种封装,有时想单独发起一个简单的请求,还有点麻烦,因此记录一下。 // 在xxx.vue文件中引入 import axios from 'axios' // 在methods 对象中使用 methods: {

vue2前端使用axios发起post请求,后端(springboot)拿不到值解决办法_axios发送post请求后台springboot控制器处理方法参数-爱代码爱编程

一、错误回现(前后端错误演示) axios封装-我常用的请求头参数 application/json; charset=utf-8 页面登录请求-post 网络请求正常传入参数 后端代码,查看控制台发现都为null,没取到值。 二、解决 1.尝试将前端post请求改成get,其他都不用变 发现正常取到值,打印输出正

vue中使用axios向后端发送请求获取数据_vue请求后端数据axios-爱代码爱编程

在vue中,推荐使用Axios发送请求, Axios 是一个基于promise网络请求库,作用于node.js 和浏览器中,通过axios可以向客户端发送ajax请求。 使用npm安装axios插件 跳转到项目根目录下面 使用npm install axios密令进行安装