axios数据请求

最新推荐文章于 2023-03-21 15:31:12 发布
最新推荐文章于 2023-03-21 15:31:12 发布
阅读量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
关注
专栏目录
axios 请求数据
Conradine_Lian的博客
07-11 660
axios请求方法 get请求：获取数据 2个参数 url,config axios.get('/index.json',{params:{id:12}}).then((res)=>{console.log(res)}) axios({method:'get',url:'/index.json',params:{id:12}}).then((res)=>{console.log(res)}) post请求：发送数据 3个参数 url,data,config application/js
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
下面详细介绍如何在Vue项目中使用axios进行数据请求，以及如何解决跨域问题和拦截器的使用。 首先，要使用axios，需要在项目中进行安装，可以使用npm命令进行安装： ``` npm install axios vue-axios --save ``` ...
axios请求数据
weixin_34122810的博客
05-27 203
Element UI手册：cloud.tencent.com/developer/d… 中文文档：element-cn.eleme.io/#/zh-CN github地址：github.com/ElemeFE/ele… 1：进入项目，npm安装 npm install axios --save 复制代码 2.在main.js下引用axios import axios from 'axi...
axios 数据请求
热门推荐
会飞的代码的博客
02-13 1万+
项目地址：https://github.com/axios/axiosaxios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。Vue.js 不像jQuery 或 AngularJS，本身并没有带Ajax方法，因此需要借助插件或第三方HTTP库。GET和POST请求  axios.get("./package.json",{           para...
vue axios数据请求及vue中使用axios的方法
10-18
以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括： - 支持 Promise API，使得异步操作...
vue axios数据请求get、post方法及实例详解
10-18
这里的`axios.post(url, params)`会发送POST请求，其中`params`是你要发送的数据。 axios还提供了其他高级特性，例如： - **设置请求头**：可以通过headers选项添加自定义请求头，如认证信息。 ```javascript ...
数据请求-axios
最新发布
m0_67624022的博客
03-21 766
axios发送get请求、post请求、axios全局配置、响应拦截器、请求拦截器，封装axios、跨域请求
vue中Axios请求数据
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-20 572
vue中get，post请求 进入文件夹根目录运行命令npm install axios --save 在需要用的页面通过import Axios(自定义名字) from 'axios'进行引入 也可在设置公共请求地址 import axios from 'axios' axios.defaults.baseURL = '******'; //设置公用请求 Vue...
使用axios请求数据
weixin_30672295的博客
06-29 124
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 下载 npm install axios ...
axios请求接口数据
weixin_68160847的博客
01-12 610
axios 默认是异步请求，若想等请求返回数据后再往下执行代码，请在需要调用axios的方法前加 async 关键字，且在调用axios请求时加上 await 关键字发送同步请求。
axios发起数据请求【详细】
egg_er的博客
03-06 1881
axios发起数据请求 axios类似于jQuery都是一个库，axios是专注于数据请求方面的库，轻量级，非常好用 使用前需要先调用axios.js的包 // 使用前先调用 <script src="./js/axios.js"></script> 直接上才艺，先分开说如何使用axios发起get请求以及post请求，再使用axios类似于jQuery中的$.ajax({})的方式发起get以及post请求 使用axios发起get请求 <button id="btn1"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值