02-前端axios网络请求的封装

大前端 axios ajax 网路请求

发布时间 : 2020-07-07 00:28

字数:947 阅读 :

评论:

网络请求axios封装

网络请求axios封装

1.什么是网络请求

在进行与后端数据交互的时候，通常需要向后端发送网络请求得到json串，前端通过格式转换进行页面的展示

2.为什么要使用axios作为网络请求框架

刚开始纯xhr （XmlHttpRequest） 对象方式进行网络请求的发送，比较麻烦，并且容易产生冗余代码。后来出现了 jquery库中的ajax ，也是一个前端网路数据请求的框架，相比原生的网路请求，ajax进步很大，对xhr进行了进一步的封装，但是出现另外一个问题，那就是容易产生 回调地狱的问题 ，如下 极端情况

$.ajax(url1,()=>{
  //在发送URL1请求的时候又继续发送请求URL2，代码一直处于回调中
  // 这是一种很极端的情况，但有时候超过三层就不再回调了
  $.ajax(url2,()=>{

  })
})

3.axios解决函数的回调和业务逻辑单独处理

3.1axios发送请求的方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

3.2发送get请求

import axios from 'axios'

export default {
  name: '#app'
  created:{
    // 链式调用，.then()处理成功的回调，.catch()处理异常和拦截的数据
    axios.get('http://localhost:8080/getlist').then(res => {
      console.log(res)
    }).catch(error){
      console.log(error)
    }
  }
}

3.3发送并发请求(两个及以上)

import axios from 'axios'
export default {
  name: '#app'
  created:{
    // 
    axios.all(axios.get('http://localhost:8080/getlist','http:localhost:8080/getUserName'),axios.get('http://localhost:8080/getusename'),{parms:{type:'sell',page:1}}).then(axios.spread((res1,res2) => {
      console.log(res1)
      console.log(res2)
    })
  }
}

3.4网络全局配置

// axios.defaults.baseURL = ‘123.207.32.32:8000’axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

// 开发过程中很多参数都是相同的，所以把相同的东西抽取出来
axios.defaults.baseUrl = 'http://localhost:8080/api' 
export default {
  name: '#app'
  created:{
    // 链式调用，.then()处理成功的回调，.catch()处理异常和拦截的数据
    axios.get('/username').then(res => {
      console.log(res)
    }).catch(error){
      console.log(error)
    }
  }
}

4 让项目发送网路请求更加具有可配置性

4.1 创建新的axios全局实例

// 通过axios.create方法传入参数
const instance = axios.create({
  baseURL: 'http://localhost:8080/api'
  timeout: 5000
  headers:{
    // 用于上传form 表单
    'Content-Type’] = ‘application/x-www-form-urlencoded'
  }

})

4.2 axios配置的升级版本

网络请求的目录

axios.js文件

//用单独的文件来保存这个文件
import originAxios from 'axios'

export default function request(config) {
    //1.创建axios实例
    const instance = originAxios.create({
        baseURL: 'http://152.136.185.210:8000/api/n3',
        timeout: 5000,
      }
    )
    //2.拦截器的使用（request）
    instance.interceptors.request.use(config=>{
      // console.log(config);
      //放行拦截的信息
      //1.比如config中的一些信息不符合服务器的要求
      //2.比如每次发送网络请求时候，都希望在界面中显示一个请求的图标
      //3.某些网络请求(比如登录(token )),必须携带的一些信息。token就是令牌
      return config
    },err =>{
      console.log(err);
    })
    //3.response拦截的使用
    instance.interceptors.response.use(resp=>{
      // console.log(resp);
      return resp
    },err=>{
      console.log(err);
    })
    //3.发送真正的网络请求
    return instance(config)
}

detail.js文件这个就是具体发送网络请求的地方


import request from "./axios";
export function getDetail(iid) {
  return request({
    url: '/detail',
    params:{
      iid
    }
  })
}

export function getRecommends() {
  return request({
    url: '/recommend'
  })
}

export class Goods {
  constructor(itemInfo,columns,service) {
    this.title = itemInfo.title
    this.price = itemInfo.price
    this.oldPrice = itemInfo.oldPrice
    this.discount = itemInfo.discountDesc
    this.columns = columns
    this.services = service
    this.desc = itemInfo.desc
    this.realPrice = itemInfo.lowNowPrice
  }
}

在使用网络请求的地方导入detail.js

import {getDetail ,getRecommends,Goods} from "network/detail";

使用这个网络请求

getDetail(this.iid).then(res=>{
  //1.获取商品数据
  const data= res.data.result;
  console.log(data)
})

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1371769065@qq.com