axios数据请求

get  获取数据

post  添加

put  修改

delete  删除

axios底层对象是xhr

安装axios命令：

npm i axios

get请求：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.title">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
// 先使用npm i axios 安装
import axios from 'axios'
export default {
  data() {
    return {
      list: []
    }
  },
  // 组件创建后发送请求
  created() {
    // 方法一 发送get请求 querystring 查询字符串传递参数  拼接字符串
    // axios.get('https://api.jiasiyuan.cn/news?page=1').then((res)=>{
    //   // res response 响应 服务端返回给客户端的信息
    //   console.log(res.data);
    //   this.list = res.data.result
    // })
    // 方法二 发送get请求 使用配置对象进行设置参数   最终axios自己拼接参数
    // axios.get(url,config[对象])
    axios
      .get('https://api.jiasiyuan.cn/news', {
        params: { page: 2 }
      })
      .then((res) => {
        // res response 响应 服务端返回给客户端的信息
        console.log(res.data)
        this.list = res.data.result
      })
  }
}
</script>

<style lang="scss" scoped></style>

post请求：

<template>
  <div>
    <div v-for="item in list" :key="item.area">
      {{ item.area }}:{{ item.counts }}
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    // axios发送post请求
    // post请求可以传递url地址参数
    // axios.post('https://api.i-lynn.cn/college?'+"name=hello").then((res) => {
    //   // console.log(res);
    //   this.list = res.data.data.list
    //   console.log(this.list)
    // })
    // post请求传递 请求体body参数
    // axios.post(url,传递的数据[对象],配置项[对象])
    // axios.post('https://api.i-lynn.cn/college?name=hello',{msg:'good'}).then((res) => {
    axios
      .post(
        'https://api.i-lynn.cn/college',
        { msg: 'good' },
        { params: { name: 'jerry' } }
      )
      .then((res) => {
        // console.log(res);
        this.list = res.data.data.list
        console.log(this.list)
      })
  }
}
</script>

<style lang="scss" scoped></style>

axios请求通用方法：

<template>
  <div>

  </div>
</template>

<script>
import axios from 'axios';

  export default {
    created(){
      // axios({配置对象})
      axios({
        // 请求地址
        url:'https://api.i-lynn.cn/college',
        // 请求类型
        method:'POST',
        // 超时时间
        timeout:5000,
        // 自定义请求header
        // jwt json web token  字符串  验证用户的登录身份
        // 接口需要登录才可以获取到数据信息,通过验证token实现
        headers:{
          token:'sfsfsfsxxxxxx'
        }
      }).then(res=>{
        console.log(res);
      })
    }
  }
</script>

<style lang="scss" scoped>

</style>

axios封装拦截器基本方法：

<template>
  <div>

  </div>
</template>

<script>
import axios from 'axios';

  export default {
    created(){
      // 请求拦截器  请求发送之前进行拦截 并统一进行请求配置
      // 可以把一些通用的配置参数  在这里进行配置  比如说 token
      axios.interceptors.request.use(cfg=>{
        console.log(cfg);
        // 统一配置参数
        cfg.headers = {
          token:'sfsfsfsxxxxxx'
        }
        // 返回配置项 不返回 请求就被取消
        return cfg
      })
      // 响应拦截器
      axios.interceptors.response.use(res=>{
        // 对应返回的数据进行统一处理
        console.log(res);
        return res.data
      })
      axios.get('https://api.i-lynn.cn/college').then(res=>{
        console.log(res);
      })
    }
  }
</script>

<style lang="scss" scoped>

</style>

登录界面的请求

/**
 *  统一封装请求方法
 *  拦截器使用
 *  请求统一配置
 *  响应统一处理
 *
 */
import axios from 'axios'
import { Message } from 'element-ui'
const instance = axios.create({
  // 接口请求前缀
  // baseURL: 'http://localhost:5000/api/v1',
  // 接口请求超时时间
  timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use((cfg) => {
  // 如果登录后存储了token 就在后续发送请求中携带token在header请求头当中
  if (localStorage.getItem('token')) {
    cfg.headers.Authorization = localStorage.getItem('token')
  }
  // 返回配置 如果不返回 请求就取消
  return cfg
})

// 响应拦截器
instance.interceptors.response.use((res) => {
  // 方法二 通过请求响应拦击器 进行拦截
  // 判断返回的code状态为401 token失效
  //   if (res.data.code === 401) {
  //     Message({
  //       message: '请登录',
  //       duration: 700,
  //       type: 'error',
  //       onClose: () => {
  //         window.location.href="/login"
  //       }
  //     })
  //   }
  if (res.data.token) {
    localStorage.setItem('token', res.data.token)
  }
  return res
})

export default instance

基本请求：

import axios from 'axios'

/**
 *  baseUrl  寄出地址  接口公共部分的地址
 * timeout  链接超时时间
 * 拦截器   一定返回参数  不返回  就中断
 *    对请求进行拦截  进行统一配置  统一携带参数  token
 *    响应拦截器    对响应进行拦截 对于数据进行统一格式处理
 */
const instance = axios.create({
    baseURL: '',
    timeout:1000,
    //添加请求头信息
    headers:{'Authorization' : localStorage.getItem('token')}
});

    //请求拦截器
instance.interceptors.request.use(cfg =>{
    return cfg
});
    //响应拦截器
instance.interceptors.response.use(res =>{
    return res
})

export default instance