[手寫系列]使用axios封裝一個天氣預報的package,併發布至NPM

龜霸也是高達發表於2020-11-28

第一步

先初始化然後安裝依賴,我要用到axios處理非同步請求,所以要安裝axios

//初始化專案
npm init
//安裝axios
npm install -g http-sever
npm install -save axios

建議大家如果不能科學衝浪,把國內npm源換成淘寶源或者使用yarn.(而且科學衝浪還得開全域性,開了全域性還會卡,安裝緩慢,卡到一半出問題,說多了都是淚,因此建議直接更換源)

//直接換
npm config set registry https://registry.npm.taobao.org
//查詢當前源
npm config get registry
//還原回來
npm config set registry https://registry.npmjs.org/

第二步

按照axios的文件來,自己寫個模組並匯出

  • 返回一個new Promise物件,當我使用這個匯出來的方法,
  • 使用方法時直接使用then()和catch()就可以為所欲為對面的資料做出控制
const axios = require('axios')

function getWeather(city){
  return new Promise((resolve,reject)=>{
    axios.get(`自己去找個免費的天氣api=${encodeURI(city)}`)
      .then( response => {
        resolve(response.data)
      })
      .catch(e=>{reject('網路異常')})
  })
}
module.exports = getWeather

測試一下:
新建個test.js

const getWeather = require('./index')

getWeather('北京')
  .then(data => console.log(data))
  .catch(e=> console.log(e))
node test.js

成功!

在這裡插入圖片描述

最後的最後

釋出到npm上

npm publish

好了現在只需要在你的專案環境下

npm install sunnyday

在你的檔案中引入sunnyday模組,然後再函式中輸入對應的城市名,即可得到天氣

下面是我的天氣模組釋出成功的連結
https://www.npmjs.com/package/sunnyday
在這裡插入圖片描述

相關文章