zoukankan      html  css  js  c++  java
  • heima--ajax封装

    import axios from 'axios'
    import { Loading } from 'element-ui'

    // qs表单序列化:不是每个POST传值,都需要qs进行表单序列化操作
    // java,.net,php很早出现在后端语言,需要进行序列化操作
    // 进入公司,什么时候需要序列化,需要与后端开发人员沟通
    // 登录的两种操作:1,session,登录的时候向后端发送了用户名和密码,后端收到了用户名和密码他会在我们浏览器设置一个cokie
    // 这个cokie里面存放的就是个人信息,这个登录没什么特殊操作。
    // token,登录的时候向服务器发送了用户名和密码,服务器会根据发送的用户名和密码加密生成一个随机的字符串token,并把
    // 这个token返回给前端,后续的接口请求当中带上这个返回的token.
    // 创建一个axios的对象
    // 发送请求前baseURL拼接在参数前面
    /*
    把baseURL挂在axios上,和下面的方法效果一样
    axios.defaults.baseURL = 'http://localhost:8888'
    axios.defaults.timeout = 5000
    */
    const instance = axios.create({
      baseURL: 'http://localhost:8888',
      timeout: 5000
    })
    let loadings
    // 请求拦截,所有的请求都会先走这个方法
    instance.interceptors.request.use(
      function (config) {
        loadings = Loading.service()
        // config代表axios的配置
        console.group('请求挂载')
        console.log(config)
        console.groupEnd()
        config.headers.authorization = ''
        // if (config.method === 'post') {
        //   config.data = qs.stringify(config.data)
        // }
        return config
      },
      function (err) {
        return Promise.reject(err)
      }
    )
    // 响应拦截,请求响应后会先执行此方法
    instance.interceptors.response.use(
      function (response) {
        loadings.close()
        console.group('响应挂载')
        console.log(response)
        console.groupEnd()
        return response
      },
      function (err) {
        return Promise.reject(err)
      }
    )
    // 封装get讲求方法
    //  get请求参数一url地址,参数二:{}为配置信息固定属性,属性名不能变属性值可以变。1,params:{}表示传递到服务器的数据,
    //  以url参数的形式拼接在地址后面。2,headers:{}为表示请求头。
    export function get (url, params) {
      return instance.get(url, {
        params
      })
    }

    //  post请求三个参数,参数1:url.参数2:传递的数据,在请求体中传递。axios默认发送的是json格式。参数3:默认配置信息(config)。
    export function post (url, data) {
      return instance.post(url, data)
    }

    export function del (url) {
      return instance.delete(url)
    }

    export function put (url, data) {
      return instance.put(url, data)
    }
  • 相关阅读:
    Spring Boot源码分析-配置文件加载原理
    Spring Boot源码分析-启动过程
    Spring Cloud Alibaba基础教程:Nacos服务发现与配置管理
    JVM(九):垃圾回收算法
    JVM(八):Java 对象模型
    JVM(七):JVM内存结构
    JVM(六):探究类加载过程-下
    JVM(五):探究类加载过程-上
    JVM(四):深入分析Java字节码-下
    JVM(三):深入分析Java字节码-上
  • 原文地址:https://www.cnblogs.com/xiaoxiao95/p/13058172.html
Copyright © 2011-2022 走看看