欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue中使用aniox请求Ajax

程序员文章站 2022-03-26 17:06:07
Vue中使用aniox请求Ajaxaxios 是一个 封装好的 第三方ajax请求的库 特点：支持restfulapi 支持promise 解决回到地狱 支持ajax请求拦截get请求语法如下（不携带参数）axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{ //成功回调}).catch(err=>{ // 失败回调})<......

Vue中使用aniox请求Ajax

axios 是一个 封装好的 第三方ajax请求的库
特点：支持restfulapi
支持promise 解决回到地狱
支持ajax请求拦截

get请求

语法如下（不携带参数） 

axios.get('http://xxxx.xxx.com?a=10&b=20').then(res=>{
  //成功回调
}).catch(err=>{
  // 失败回调
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <script src="./axios.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      // 定义一个数据用来存储请求回来的数据
      films: [],
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        axios.get('https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=9532407',{
          headers:{
              "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
              "X-Host": "mall.film-ticket.film.list"
          }
        }).then(res=>{
          this.films = res.data.data.films
          console.log(this.films);
        })
      }
    }
  })
</script>
</html>

携带参数 

axios.get(url,{
  params:{ // get请求需要携带的数据 在真实请求时，会自动 放到地址栏后面
    a:10,
    b:20
  },
  headers: { // 在请求头中 加上若干参数...
  }
})
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.js"></script>
  <script src="../../vue.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  axios.defaults.baseURL = 'https://m.maizuo.com';
  const vm = new Vue({
    el: '#app',
    data: {
      films: [],
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        // 定义一个请求函数
        axios.get('/gateway',{
          headers: {
            "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
            "X-Host": "mall.film-ticket.film.list"
          },
          params: {
            cityId:440300,
            pageNum:1,
            pageSize:12,
            type:1,
            k:9532407
          }
        }).then(res=>{
          // 将res中请求到的数据赋予到films中 
          if(res.data.status === 0){
            this.films = res.data.data.films
          }
        })
      }
    }
  })
</script>
</html>

POST请求 

axios.post('/user', {  // 这个对象就是请求携带的数据 会自动挂载到请求体中
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    // 正确回调
    console.log(response);
  })
  .catch(function (error) {
    // 错误回调
    console.log(error);
  });

综合请求 

axios({
  url:"xxx",
  method:"xxx",
  params:{},
  data:{

  },
  headers:{

  }
}).then(res=>{
  // 成功时回调
}).catch(res=>{
  // 失败时回调
})

实例请求 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./axios.js"></script>
  <script src="../../vue.js"></script>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      
    }
    li{
      width: 25%;
    }
  </style>
</head>
<body>
  <div id="app">
    <ul>
      <li
        v-for="(film,index) in films"
        :key="film.filmId"
      >
        <h3>{{film.name}}</h3>
        <p>
          导演：{{film.director}}
        </p>
        <img :src="film.poster" alt="">
      </li>
    </ul>
  </div>
</body>
<script>
  // 定义一个实例用于请求
  const request = axios.create({
    baseURL: "https://m.maizuo.com",
    timeout: 1000,
    headers: {
      "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"160256909153244709568514"}',
      "X-Host": "mall.film-ticket.film.list"
    }
  })
  const vm = new Vue({
    el: '#app',
    data: {
      films: []
    },
    created () {
      this.axiosFilmData()
    },
    methods: {
      axiosFilmData () {
        request.get('/gateway',{
          params: {
            cityId:440300,
            pageNum:1,
            pageSize:12,
            type:1,
            k:9532407
          }
        }).then(res => {
          if(res.data.status === 0){
            this.films = res.data.data.films
          }
          console.log(this.films);
        }).catch((err) => {
          
        });
      }
    }
  })
</script>
</html>

配置默认值 

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios的拦截器

您可以在处理请求或响应之前拦截它们，或者捕获它们。 

// 添加一个axios 请求的拦截
axios.interceptors.request.use(function (config) {
    // 在发送之前可以在这里做某些事情
    // 如果你不rerturn config 请求时发送不出去的
    return config;
  }, function (error) {
    // 请求出错了 走这个拦截
    return Promise.reject(error);
  });

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
    // http状态码 为2xx 会走这个响应成功的回调
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

如果您以后需要删除拦截器，您可以这样做。 

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以向axios的自定义实例添加拦截器。 

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});


本文地址：https://blog.csdn.net/T_ambition/article/details/109059342

相关标签： Vue框架 ajax vue

上一篇： 【轻松学】Springboot整合Mybatis-PLus进行快速开发

下一篇： 唐高宗是如何讨好自己的舅舅长孙无忌的？起到效果了吗？

推荐阅读