axios数据请求

最新推荐文章于 2023-09-20 14:30:29 发布
最新推荐文章于 2023-09-20 14:30:29 发布
阅读量623 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45669178/article/details/105921842
版权

axios

一、数据请求封装

注：下载axios
npm install --save axios

1、回调函数的方法

1）在src——>api——>request.js

// 引入
import axios from 'axios';
// 对其进行暴露(让其在外面传入；  success，failure他俩都是参数    success是一个函数，failure他也是一个函数   然后都可以回调出去   )
export function request(config,success, failure){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })


    // 发送网络请求( res 这个是一个参数的时候，不用加括号，是俩参数的时候，记得加一个圆括号)
    instance(config)
    .then(res=>{
        // console.log(res);
        // 在这块给它回调出去
        success(res);
    })
    .catch(err=>{
        // console.log(err)
        // 回调出去
        failure(err);
    })
}

2)使用

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

<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  components: {
    
  },
  created() {
	request({
	  url:'/home/multidata'
	},res=>{
	  console.log(res);
	},err=>{
	  console.log(err);
	})
  },
}
</script>
<style>
</style>

2、关于promise的方法

1）不简写的写法
①在src——>api——>request.js

import axios from 'axios';
export function request(config){
    return new Promise((resolve,reject)=>{
        // 1、创建实例，不要创建全局的
        const instance = axios.create({
            baseURL:"http://123.207.32.32:8000/api/h8",
            timeout:5000//这个是5秒的意思
        })
        // 发送网络请求( res 这个是一个参数的时候，不用加括号，是俩参数的时候，记得加一个圆括号)
        instance(config)
        .then(res=>{
            resolve(res);
        })
        .catch(err=>{
            reject(err);
        })
    })
}

②使用

<template>
  <div>
   
  </div>
</template>
<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  // 这个是组件的调用
  components: {

  },
  created() {
    request({
      url:'/home/multidata'
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
  },
}
</script>
<style>
</style>

2）简写的写法
①在src——>api——>request.js

import axios from 'axios';
// 对其进行暴露(让其在外面传入；  success，failure他俩都是参数    success是一个函数，failure他也是一个函数   然后都可以回调出去   )
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })
    // 发送网络请求
    return instance(config);//instance(config)它本身返回一个Promise
}

②使用

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

<script>
import {request} from '@/api/request';
export default {
  name: 'App',
  components: {
    
  },
  created() {
	request({
	  url:'/home/multidata'
	}).then(res=>{
	  console.log(res);
	}).catch(err=>{
	  console.log(err);
	})
  },
}
</script>
<style>
</style>

二、拦截器

注：以后要拦截的时候，就使用对应的拦截器，就可以了
1、在src——>api——>request.js

//引入
import axios from 'axios';
/* 对其进行暴露(让其在外面传入；  
success，failure他俩都是参数  success是一个函数，failure他也是一个函数  然后都可以回调出去)*/
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000/api/h8",
        timeout:5000//这个是5秒的意思
    })
    // 2、axios拦截器,它分为全局拦截（axios.interceptors）和实例拦截，下面我们使用实例拦截
    // 2-1、这样写代表拦截请求(里面有两个参数)
    instance.interceptors.request.use(config=>{
        // 这里拦截是成功的（这里至少是发送成功的）,所以在拦截之后，要return出去，要不然外面收不到
        // console.log(config);
        /* 请求拦截做的一些事情：
        1）比如它不符合服务器的要求的时候，在这里拦截掉；
        2）在这里进行一些数据的过滤；
        3）比如在页面发送请求的时候，在页面显示一个图标，在请求成功的时候，消失掉；
        4）某些 网络的请求（比如登录的token），必须携带一些特殊的信息时，就比如在发送某些
        必须登录之后，才能发送的求情时，可以在这判断，在没登录的时候，让其登录之后，才可
        以发送某些请求*/
        return config;
    },err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应(这里也要传入两个参数)，所以是结果
    instance.interceptors.response.use(res=>{
        // 服务器已经响应了,服务器返回的真正结果
        // console.log(res);
        // 在这返回结果，因为在别的地方要使用，如果这块不返回，在别的地方 就没办法使用
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}

2、使用（使用方法如请求封装）

// 在这块调用这个函数
import {request} from '@/api/request';

request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

三、axios登录的请求写法

1、src——>api——>request.js

//引入
import axios from 'axios';
/* 对其进行暴露(让其在外面传入；  
success，failure他俩都是参数  success是一个函数，failure他也是一个函数  然后都可以回调出去)*/
export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"url",
        timeout:5000//这个是5秒的意思
    })
    // 2、axios拦截器,它分为全局拦截（axios.interceptors）和实例拦截，下面我们使用实例拦截
    // 2-1、这样写代表拦截请求(里面有两个参数)
    instance.interceptors.request.use(config=>{
        /* 这里拦截是成功的（这里至少是发送成功的）,所以在拦截之后，要return出去，
        要不然外面收不到*/
        // console.log(config);
        /* 请求拦截做的一些事情：
        1）比如它不符合服务器的要求的时候，在这里拦截掉；
        2）在这里进行一些数据的过滤；
        3）比如在页面发送请求的时候，在页面显示一个图标，在请求成功的时候，消失掉；
        4）某些 网络的请求（比如登录的token），必须携带一些特殊的信息时，就比如在发送某些
        必须登录之后，才能发送的求情时，可以在这判断，在没登录的时候，让其登录之后，才可
        以发送某些请求*/
        return config;
    },err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应(这里也要传入两个参数)，所以是结果
    instance.interceptors.response.use(res=>{
        // 服务器已经响应了,服务器返回的真正结果
        // console.log(res);
        // 在这返回结果，因为在别的地方要使用，如果这块不返回，在别的地方 就没办法使用
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}

2、在页面请求数据的时候，在加一层
住：src——>api——>login.js

import {request} from '@/api/request';
// 登录的数据
export function login(username,password){
    return request({
        url:'/url',
        //在这写数据请求方式
        method:"post",
        params:{
        	//下面这俩是和后端约定好的键名
            username,
            password
        }
    })
}

3、在页面中调用上面的方法
住：下面用了elementUI

<template>
    <div class="login_container">
        <!-- 登录组件 -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                

            </div>
            <!-- 表单区域(拿到这个表单里面的实例对象，就是用ref) -->
            <el-form ref='login_From' :model="loginFrom" :rules="loginRules" label-width="0px" class="login_from ">
                <!-- 账户 -->
                <el-form-item label="" prop="userName">
                    <el-input prefix-icon="iconfont icon-user" v-model="loginFrom.userName">
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="" prop="userPassword">
                    <el-input prefix-icon="iconfont icon-3702mima" v-model="loginFrom.password" type="password">
                    </el-input>
                </el-form-item>
                <!--  -->
                <el-form-item label="" class="login_btns">
                    <el-button type="primary" @click="loginBtn">登录</el-button>
                 
                    <el-button type="info" @click="restBtn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
// 引入数据的请求
/* import {request} from '@/api/request';*/
import {login} from '@/api/login.js';
export default {
    data() {
        return {
            // 这是登陆的数据对象
            loginFrom:{
                userName:'admin',
                password:'123456'
            },
            // 添加验证对象
            loginRules:{
                // 用户名
                userName:[
                     { required:true,message:'请输入登录名称', trigger:'blur'},
                     { min:3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                // 密码
                userPassword:[
                    { required:true,message:'请输入登录密码', trigger:'blur'},
                    { min:3, max:10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 点击重置的
        restBtn(){
            // 指向当前登录的组件实例对象
            // console.log(this);
            this.$refs.login_From.resetFields();//他是重置表单
        },
        // 点击登录，对他进行一个yu验证
        loginBtn(){
// 登录的数据
           /* 
           //像下面这个写法，可以省略第二步
           request({
                url: '/login',
                method:"post",
                params: {
                    username:this.loginFrom.userName,
                    password:this.loginFrom.password
                }
            }).then(res =>{
               console.log(res);

            })
*/
	//传入两个参数
            login(this.loginFrom.userName,this.loginFrom.password).then(res =>{
                console.log(res);
            })
        },


    },
}
</script>
<style scoped>

</style>

四、请求报错的解决方法

住：出现以下报错的时候：
在这里插入图片描述
出现这个表示后端解决了跨域，但是 前台的请求，需要携带一个身份验证信息，但是在Options预请求时被拦截下来了，所以要解决这个拦截。

解决方法如下：
axios.defaults.withCredentials = true;
这样解决了，加在request.js里（即封装的数据请求里面）。
在这里插入图片描述

五、axios数据请求封装

1、在src——>utils——>request.js里写axios封装

/*
 * @Author:李勇
 * @Date:2020-07-09
 * @LastEditors:李勇
 * @LastEditTimes:2020-07-09 10:00
 * @Description:
*/
//引入
import axios from 'axios';
//解决跨域（后台解决之后，用它,它代表每次发数据的时候，要向后台发送一个身份验证，它默认是false）
axios.defaults.withCredentials = true;
// 在这块引入elementUI进行错误的提示

export function request(config){
    // 1、创建实例，不要创建全局的
    const instance = axios.create({
        baseURL:"URL",
        timeout:5000,
        headers:{
            "content-type": "application/json;charset=UTF-8",
        }
    })
    // 2、axios拦截器
    instance.interceptors.request.use(config=>{
        //在这块给每个请求添加token，根据情况自己修改
        return config;
    },
	err=>{//这块很少来到，因为是发送失败的(数据很少发送失败)
        console.log(err);
    });
    // 2-2、拦截响应
    instance.interceptors.response.use(res=>{
        //响应拦截器，所以在这处理结果
        return res;
    },err=>{
        console.log(err);
    });
    // 3、发送网络请求
    return instance(config)
}
RookieChicken
关注
专栏目录
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
下面详细介绍如何在Vue项目中使用axios进行数据请求，以及如何解决跨域问题和拦截器的使用。 首先，要使用axios，需要在项目中进行安装，可以使用npm命令进行安装： ``` npm install axios vue-axios --save ``` ...
VUE（仿今日头条项目）【1】封装axios函数与封装接口方法（async和await）
weixin_51612770的博客
09-03 810
项目
axios导出
u013239476的博客
07-02 335
exportExcel() { this.$axios({ method: method, url: url, data: data, responseType: 'blob' //这里要设置blob类型 }).then(data => { //data是后端返回的文件流 console.log(data); let blob = new Blob([data]); le
Vue（六）：axios拦截器、模块管理API、export和export default的区别、axios跨域配置、环境变量、接口文档
Start_Simple的博客
03-15 2363
axios安装、get和post的区别、如何实现跨域
axios的封装
weixin_54904533的博客
04-30 150
第一步：配置axios 首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。 import axios from 'axios' import { Message, Loading } from 'element-ui' const ConfigBaseURL = 'https://localhost:3000/' //默认路径，这里也可以使用env来判断环境 let loadin
vue3+ts封装axios请求
weixin_44368048的博客
09-20 1238
本文主要介绍了vue3和typescript+vite实际开发中对axios的请求封装。
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
axios数据请求功能封装包括get和post
03-22
axios数据请求功能封装包括get和post
vue axios数据请求get、post方法及实例详解
10-18
这里的`axios.post(url, params)`会发送POST请求，其中`params`是你要发送的数据。 axios还提供了其他高级特性，例如： - **设置请求头**：可以通过headers选项添加自定义请求头，如认证信息。 ```javascript ...
vue项目中引入axios及使用
初心不改，事在人为
10-23 3858
1.执行命令npm install axios --save 2.创建3个文件 env.js export default { // 接口地址 baseURL: 'http://localhost:8090/xf4g/a/', isDev: true } index.js import Env from './env'; import axios from 'axios' import routerIndex from '../router/index' let token
vue中的接口封装
qq_44144735的博客
10-23 1154
vue中的接口封装 安装 npm install axios; // 安装axios 引入 在src目录下，新建一个request文件，包含http.js 和 api.js 文件 http.js用来封装axios api.js用来管理接口 // 在http.js中引入axios import axios from 'axios'; // 引入axios import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到 // vant的toast提示框组件，大家
HTTP请求封装 & 拦截器的使用
huhm_evget的博客
04-25 1065
文中代码部分来源于：https://blog.csdn.net/weixin_56947857/article/details/115908520 新建request.js，主要用于建立请求和响应拦截 import axios from 'axios' import { Message, MessageBox } from 'element-ui'//请根据自己的情况自信修改 import store from '../store' // 创建axios实例 const service = axios
request请求及response响应
路在脚下
12-26 1418
请求request 利用HTTP协议向服务器传参几种途径 提取的URL的特定部分，如/天气/北京/ 2018，可以在服务器端的路由中用正则表达式截取; 查询字符串（查询字符串），形如key1 = value1＆key2 = value2; 请求体（主体）中发送的数据，比如表单数据，JSON，XML; 在HTTP报文的头（报头）中。 1 URL路径参数 在定义路由URL时，可以使用正则表...
简单配置axios 总结(可直接复制使用)
qq_39056703的博客
06-15 1279
axios封装配置 可直接复制使用
数据请求-axios
m0_67624022的博客
03-21 766
axios发送get请求、post请求、axios全局配置、响应拦截器、请求拦截器，封装axios、跨域请求
Vue中使用Axios请求后端接口的方法总结
Allurewuhui的博客
12-07 4476
1.在入口文件引入axios并配置请求头根路径和请求头拦截 // 引入axios import axios from 'axios' // 设置请求根路径 axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/' // 设置请求头拦截 axios.interceptors.request.use(config => { config.headers.Authorization = window.sessionStorage.
利用Axios实现网络数据请求
weixin_52065872的博客
07-15 1418
什么是axios？ axios是专注于**网络数据请求**的库 相比于原生的XMLHttpRequest对象，axios **简单 易用** 相比于jQuery.ajax更加轻量化，只专注于网络数据的请求
axios请求数据
weixin_68557949的博客
03-26 135
axios请求数据
axios 数据请求
最新发布
12-28
在Vue中使用axios进行数据请求的方法如下： 1. 首先，需要在项目中安装axios。可以使用npm或者yarn进行安装： ```shell npm install axios ``` 或者 ```shell yarn add axios ``` 2. 在需要使用axios的组件中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值