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的实例化
- 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) // }) // }