2020-09-02 Vue axios

fetch（js新增的用于请求的方法）

代码段如下

<body>
  <div id="app">
    <ul>
      <li v-for="(film,index) in films" :key="film.filmId">
        <h5>
          电影名：{{ film.name }}
        </h5>
        <p>
          简介：{{ film.synopsis }}
        </p>
        <p>
          <img :src="film.poster" alt="">
        </p>
        <p>
          类型：
          {{ film.item.name }}
        </p>
      </li>
    </ul>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      films:[]
    },
    created(){
      //初始化完成时触发
      this.fetchFilms();
    },
    methods:{
      fetchFilms(){ //请求数据
        fetch('https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=5443328',{
          headers:{
            "X-Client-Info":'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597720815568988677439489","bc":"110100"}',
              "X-Host":"mall.film-ticket.film.list"
          },
          method:'GET'
        }).then(res=>res.json()).then(res=>{
          //res 才是请求的结果 格式化之后（什么格式取决于 第一个 then 返回的处理方法）
          if(res.status === 0){
            console.log(res);
            this.films = res.data.films;
          }
        })
      }
    }
  })
</script>

axios库（github搜索axios）

1.引入axios.js文件
axios get请求
(1).

axios.get('url?userName=xxx').then(res=>{}).catch(err=>)

(2).

axios.get(url,{
    params:{
    userName:"xxx"
 },
 headers:{

  }
}).then(res).catch()

axios post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error);
  });

axios 综合请求写法

axios({
  method: 'post',
  url: '/user/12345',
  headers:{

  },
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then().catch()

创建一个axios实例

可以对于所有的请求做一些初始化配置
配置是作用域所有的
使用实例来完成axios的请求

//创建一个 实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

axios拦截器

 //拦截器
  // 添加 请求 拦截器
  axios.interceptors.request.use(function (config) {
    // 可以在请求发送之前做一些事情  config 请求信息 config.headers 
    return config;
  }, function (error) {
    // 出错了 走这里
    return Promise.reject(error);
  });

  // 添加响应拦截
  axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // 在响应数据 发送到 ajax之前，可以在这里拦截
    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);
  });

请求卖座网数据的案例(使用axios实例方法)

<body>
  <div id="app">
    <ul class="movies">
      <li v-for="(film,index) in films" :key="film.filmId">
        <h5>
          电影名：{{ film.name }}
        </h5>
        <p>
          <img :src="film.poster" alt="">
        </p>
        <p>
          简介：{{ film.synopsis }}
        </p>
        <p>
          类型：
          {{ film.category }}
        </p>
      </li>
    </ul>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/jquery.min.js"></script>
<script>

  //创建一个axios实例
  const require = axios.create({
    baseURL:'https://m.maizuo.com',
    timeout:5000,
    headers:{
      "X-Client-Info":'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597720815568988677439489","bc":"110100"}',
      "X-Host":"mall.film-ticket.film.list"
    }
  });

  let vm = new Vue({
    el:'#app',
    data:{
      films:[]
    },
    created(){
      this.fetchFilms();
    },
    methods:{
      fetchFilms(pageNum){
        //这里可以直接使用创建好的实例来调用方法
        //这里的地址url直接写域名后面的path，因为域名在实例里面已经配置过
        require.get('/gateway',{
          params:{
            cityId:"110100",
            pageNum:1,
            pageSize:10,
            type:1,
            k:492559
          }
        }).then(res=>{
          console.log(res);
          if(res.data.status === 0){
            this.films = res.data.data.films
          }
        })
      }
    }
  })
</script>

2020-09-02 Vue axios

fetch（js新增的用于请求的方法）

axios库 （github搜索axios）

创建一个axios实例

axios拦截器

请求卖座网数据的案例(使用axios实例方法)

axios库（github搜索axios）