vue中axios的基本使用

简介: vue中axios的基本使用

axios的基本使用


1. axios的基本使用(前后端交互)

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import * as url from "url";
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
// axios({
//   url:'http://123.207.32.32:8000/home/multidata',
//   method : 'get'
// }).then((res)=>{
//   console.log(res)
// })
//
// axios({
//   url : 'http://123.207.32.32:8000/home/data',
//   params : {
//     type : 'pop',
//     page : 1
//   }
// }).then(res => {
//   console.log(res)
// })
//使用全局配置进行网络请求
// axios.defaults.baseURL = 'http://123.207.32.32:8000'
// axios.defaults.timeout = 5000
// // axios发送并发请求
// axios.all([axios({ url : '/home/multidata'
// }),axios({
//   url : '/home/data',
//   params : {
//     type: 'sell',
//     page :4
//   }
// })])
//     .then(axios.spread((res1,res2)=>{
//       console.log(res1)
//       console.log(res2)
// }))
// 4.创建对应axios实例
// const instance = new axios.create({
//         baseURL : 'http://127.0.0.1:3000',
//         timeout : 5000
//     })
// instance({
//   url : '/home'
// }).then(res =>{
//   console.log(res)
// })
//
// instance({
//   url : '/home/data',
//   params : {
//     type : 'pop',
//     page : 1
//   }
// }).then(res=>{
//   console.log(res)
// })
// 5.封装request模块
import {request} from "@/network/request";
request({
  url : '/home/multidata'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})
// request({
//   url : '/home/multidata'
// },res=>{
//   console.log(res)
// },err=>{
//   console.log(err)
// })

axios的实例化


  1. axios实例化
import axios from "axios";
export function request(config) {
    return new Promise((resolve,reject)=>{
        // /创建aixos实例
    const instance = axios.create({
        baseURL : 'http://123.207.32.32:8000',
        timeout : 5000
    })
        // 2.axios拦截器
        instance.interceptors.request.use(config=>{
            console.log(config)
            return config
        },err=>{
            console.log(err)
        })
        //响应拦截
        instance.interceptors.response.use(res=>{
            console.log(res)
            return res.data
        },err=>{
            console.log(err)
        })
    //3.发送真正的网络请求
    return instance(config)
    })
}
// export function request(config) {
//     return new Promise((resolve,reject)=>{
//         // /创建aixos实例
//     const instance = axios.create({
//         baseURL : 'http://123.207.32.32:8000',
//         timeout : 5000
//     })
//     //发送真正的网络请求
//     instance(config)
//         .then(res=>{
//             resolve(res)
//         })
//         .catch(err=>{
//             reject(err)
//         })
//     })
// }
// export function request(config,success,fail) {
//     //创建aixos实例
//     const instance = axios.create({
//         baseURL : 'http://123.207.32.32:8000',
//         timeout : 5000
//     })
//
//     //发送真正的网络请求
//     instance(config)
//         .then(res=>{
//             success(res)
//         })
//         .catch(res=>{
//             fail(res)
//         })
// }
相关文章
|
3天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
13 0
|
3天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
89 0
|
3天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
3天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
39 0
|
3天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
3天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
3天前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
21 2
|
3天前
|
JavaScript API
Vue中axios拦截器怎么使用
Vue中axios拦截器怎么使用
|
3天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
34 1
|
3天前
|
前端开发 JavaScript Java
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
36 0